|
JavaScript - Javascript Won't Take Effect Unless All Conditions Exist. Why?!
Never mind. I found a solution to get it working.
I still don't know why it occurred, but I don't have the time to fulfill my curiosity like I could when I was a teenager. Similar TutorialsHi I am trying to write a JavaScript conditional statement for 4 conditions I currently have: Code: var teamId=obj.id.substring(0, 1);
var indx=obj.id.substring(obj.id.indexOf('_')+1);
var id=indx.substring(0, indx.length-1);
var anotherTab = (indx.indexOf('a') >= 0) ? id + 'b' : id + 'a';
var anotherTab2 = (indx.indexOf('c') >= 0) ? id + 'b' : id + 'c';
var anotherTab3 = (indx.indexOf('d') >= 0) ? id + 'b' : id + 'd';
document.getElementById(teamId+'tab_' + indx).className = 'selected';
document.getElementById(teamId + 'tab_' + anotherTab).className = '';
document.getElementById(teamId + 'tab_' + anotherTab2).className = '';
document.getElementById(teamId + 'tab_' + anotherTab3).className = '';
if (indx==id+'a')
{
show (teamId+'basketballInfo_'+id);
hide(teamId + 'soccerInfo_' + id);
hide(teamId + 'footballInfo_' + id);
hide(teamId + 'baseballInfo_' + id);
}
else if(indx==id+'b')
{
hide(teamId + 'basketballInfo_' + id);
show(teamId + 'soccerInfo_' + id);
hide(teamId + 'footballInfo_' + id);
hide(teamId + 'baseballInfo_' + id);
}
else if(indx==id+'c')
{
hide(teamId + 'basketballInfo_' + id);
hide(teamId + 'soccerInfo_' + id);
hide(teamId + 'baseballInfo_' + id);
show(teamId + 'footballInfo_' + id);
}
else
{
hide(teamId + 'basketballInfo_' + id);
hide(teamId + 'soccerInfo_' + id);
hide(teamId + 'footballInfo_' + id);
show(teamId + 'baseballInfo_' + id);
}
}
I am trying to turn one tab on and have the others turned off until another tab is clicked on. It works fine if I have all 4 conditions but I need to be able to also have 3, 2, and 1. What would be an easy way to do so? Hi all Experts I am in a need of a simple javascript script that can verify if a cokie exist If it exist: (replace the below and show) You already upgraded. If not exist: I would like it to show: You account is not upgraded yet Please upgrade your account, click here to upgrade<br> <center><A href="url"><img src="picture"></center> also need seperate script to set the cokie Hope u understand what I want thank you Hi I want to build a site that has these two javascript effects. I know HTML, but dont know javscript too well, I know some to be able to change some aspects. I have found some code online that allws me to change the background image with each click of the links. the effect I now want to create is the effect that as you clikc on teh link and the new text appears, the old one drops down andthe new one pops up from the bottom into place. and you have a choice of either a big block ont eh right or a small strip on the bottom depending ont he page. what is this effect called. and does any one know where i might be able to get soem code for it from so i can insert it into my page I hope all this makes sense the site is http://www.peponi-lamu.com many thanks hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!. Example of how it works here Link Code: <head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;
function myback()
{
t += 786;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
function myforward()
{
t -= 786;
with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
<tr>
<td rowspan="2">
<div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
<td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>
Hope this is clear. Thanks. Quote: http://codecanyon.net/item/html-befo...preview/153778 http://codecanyon.net/item/beforeaft...preview/529151 http://www.catchmyfame.com/2009/06/2...eafter-plugin/ I need this effect, I will explain below The first, we have if we slide on the left. when we slide on the right if we slide to END the result will be: OR It's use jquery plugin, I want to find the same things with only javascript, not use jquery. Because, I'm use it on ipod, iphone, android. It's not allow jquery. I'm really need it. please, help me. Thanks for your time Hi, I'm kind of new to javascript and am an undergraduate studying a FdSc in web tech which encompasses all of these kind of languages (PHP, Python, HTML, CSS, Javascript and so on). Javascript is the one that I'm focusing on first and whilst I have a solid understanding of the mark up languages I'm struggling to combine the two. For the simple stuff like like the theory behind variables, functions and so on it's not a problem, but what is a problem is duplicating this kind of effect as seen on www.yidio.com The feature with the vertical menu that changes when you hover over a TV show name which then changes the content (i.e. the image and text - essentialy the HTML content) is bloody neat in my opinion and I'd like to be able to re-create it. I've also noticed the same effect is in place on the boxes at www.ebuyer.com and on the story navigation menu at www.sciencedaily.com. How can I do this? I have all the HTML and CSS source code in place but just no javascript. I've approached my lecturers about it and they've told me about jquery and javascript libraries but this still doesn't help me in being able to achieve this effect. would someone be able to explain and help me? Thanks Nick C PHP 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"> <!-- var image1=new Image() image1.src="images/slideshow/image001.jpg" var image2=new Image() image2.src="images/slideshow/image002.jpg" var image3=new Image() image3.src="images/slideshow/image003.jpg" var image4=new Image() image4.src="images/slideshow/image004.jpg" var image5=new Image() image5.src="images/slideshow/image005.jpg" var image6=new Image() image6.src="images/slideshow/image006.jpg" var image7=new Image() image7.src="images/slideshow/image007.jpg" var image8=new Image() image8.src="images/slideshow/image008.jpg" var image9=new Image() image9.src="images/slideshow/image009.jpg" var image10=new Image() image10.src="images/slideshow/image010.jpg" var image11=new Image() image11.src="images/slideshow/image011.jpg" var image12=new Image() image12.src="images/slideshow/image012.jpg" var image13=new Image() image13.src="images/slideshow/image013.jpg" var image14=new Image() image14.src="images/slideshow/image014.jpg" var image15=new Image() image15.src="images/slideshow/image015.jpg" var image16=new Image() image16.src="images/slideshow/image016.jpg" var image17=new Image() image17.src="images/slideshow/image017.jpg" var image18=new Image() image18.src="images/slideshow/image018.jpg" var image19=new Image() image19.src="images/slideshow/image019.jpg" var image20=new Image() image20.src="images/slideshow/image020.jpg" //--> </script> </head> <body> <img src="images/slideshow/image001.jpg" name="slide"> <script type="text/javascript"> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src" ) if (step<20) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hi, I'm attempting to add the following functionality to my site. Essentially, two images are displayed with a link "View More". The user clicks "View More" and the two images are replaced by two new images. This can be repeated as required. It's a basic form of slideshow I guess, but after some googling all the tutorials etc available seem to be more aimed at fully blown shows, whereas I believe my problem is much more simple. The images are contained in a directory and are numbered like so: img1.jpg, img2.jpg. img3.jpg and so on. the code I came up with so far is PHP Code: <script type="text/javascript" language="JavaScript"> start = '<img src="gallery/img'; end = '.jpg" width="150" height="200" />'; function getImage() { var n = Math.ceil(Math.random() * 10); // i have 10 images var FirstImg=(start+n+end); var n = Math.ceil(Math.random() * 10); var SecondImg=(start+n+1+end); } /* so now I think I have two variables: FirstImg = <img src="gallery/img1.jpg" width="150" height="200" /> SecondImg = <img src="gallery/img4.jpg" width="150" height="200" /> but i'm now unsure how i'd go about displaying this on the page. ideally the HTML generated would be: <div class="pics"> <p><FirstImg></p> <p><SecondImg></p> <a href="#" onClick="return getImage()">View More</a> </div> */ </script> Am I on the right lines here or am I way off?? Appreciate some pointers. thanks a lot. Hi everyone, I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this... Here is the CSS I used to create the look of the "buttons"... Code: div.btn_workshops {
background-image: url(../images/btn_workshops_mid.gif);
background-position: top left;
background-repeat: repeat-x;
cursor: pointer;
height: 22px;
margin-bottom: 1px;
width: 330px;
}
div.btn_workshops_lt {
background-image: url(../images/btn_workshops_lt.gif);
background-position: 0 0;
background-repeat: no-repeat;
height: 100%;
width: 100%px;
}
div.btn_workshops_rt {
background-image: url(../images/btn_workshops_rt.gif);
background-position: 100% 0;
background-repeat: no-repeat;
height: 100%;
padding: 3px 12px 0px 12px;
width: 100%px;
}
.hide {
display: none;
visibility: hidden;
}
.show {
display: block;
visibility: visible;
}
Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript. Code: <div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
</div>
</div>
</div>
<div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
Dates: October 9, 16, 23, and 30<br />
Hours: 2:30pm - 5:30pm<br />
Tuition: $250</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop2')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
</div>
</div>
</div>
<div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
Dates: 2/19, 2/26, 3/5, and 3/12<br />
Time: 10am - 1pm<br />
Tuition: $275
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop3')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
</div>
</div>
</div>
<div id="workshop3" class="hide">Instructor: Tom Hampton<br />
Dates: August 7 and 14<br />
Time: 9am - 4pm<br />
Tuition: $150
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop4')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
</div>
</div>
</div>
<div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
Dates: February 19 - April 23<br />
Time: 6pm - 9pm<br />
Tuition: $200
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop5')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
</div>
</div>
</div>
<div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
Dates: June 5, 12, 19, and 26<br />
Time: 10am - 1pm<br />
Tuition: $200
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
Here is the JavaScript I used to create the expand/collapse effect... Code: //Expand Workshops
function expandWorkshops(obj) {
var workshop = document.getElementById(obj)
if ( workshop.className != "hide" )
{ workshop.className = 'hide' }
else { workshop.className = 'show' }
}
Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information. Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance. This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow. This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again. Code: function flipArrow() {
if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}
This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together. Code: //Expand Workshops
function expandWorkshops(obj) {
var workshop = document.getElementById(obj)
if ( workshop.className != "hide" )
{ workshop.className = 'hide' }
else { workshop.className = 'show' }
}
function flipArrow() {
if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}
The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion. Thanks for your help! Hello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? I want to be able to load a different background image depending on the time of day. I have the code below which does work for nanaimo-morning image if before 8 am and after 8 am it will load the nanaimo-daytime image. I have tried but I can't seem to add another condition where after 8 pm it will load another imaged called nanaimo-night.png Yes, I am rather new at this, any help is greatly appreciated <code> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script language="JavaScript"> function determineBackground() { var currentTime = new Date(); if (currentTime.getHours() < 8) { document.body.background = 'images/nanaimo-morning.png'; } else { document.body.background = 'images/nanaimo-daytime.png'; } } </script> </head> <body onload="determineBackground()"> </body> </html> </code> Hiya, Not sure how to put this, here goes: I'm trying to create a form to receive customer complaints. I'm fine with the basic form structure, but would like a drop-down box or radio buttons allowing the user to state which country in the UK they are emailing from. The options are, England, Scotland, Wales and N Ireland. For example, a user fills a form in with their complaint, and selects Scotland from the drop-down/radio buttons. When the users clicks on the submit button, the script should then send an acknowledgement email to the user, and send the form details of the user to the Scottish email address of the organisation. Likewise for England, Wales and N Ireland. I'm looking at doing this all client-side. Any help would be gratefully appreciated. Many Thanks Snarf1974 FYI: THIS IS NOT HOMEWORK! Hi all, I am trying to make an all-in-one function that can use local storage and provide 4 functions: (1) read data (2) write data (3) erase specific data (4) erase all data Here's the code block I have (with alerts in place of the local storage code for debugging): Code: var storage = function (name, value) {
if (name) {
if (value === null) {
return alert('erase');
} else {
if (value != null) {
return alert('write');
} else {
return alert('read');
}
}
} else {
return alert('nuke');
}
};
I want to use it like this: storage(); - erases ('nukes') everything storage('abc'); - reads data stored as 'abc' storage('abc', 'newvalue'); - stores 'newvalue' as 'abc' storage('abc', null); - erases data stored as 'abc' only It seems to work, but I have a funny feeling about trusting the difference between "==" and "===" to make it work. Am I wrong? Is there a real difference between == and === and am I doing this correctly? Thanks! -- Roger Hi! I am trying to check and see if three fields are empty and if they are then to alert the user saying to fill in one of the three fields. I tried this: Code: if (StreetNumber.value.length == 0) {
if (StreetName.value.length == 0) {
if (City.value.length == 0) {
alert("Please enter a street number, street name, or city.");
StreetNumber.focus();
return false;
}
}
}
and this: Code: if (StreetNumber.value.length == 0 && StreetName.value.length == 0 && City.value.length == 0) {
alert("Please enter a street number, street name, or city.");
StreetNumber.focus();
return false;
}
Neither one works. Not sure what I am doing wrong. Thanks in advance! Hey all, Okay, Here is what i would like to do. I have a calculator he http://www.nico-online.co.uk/calculator/calc1.html which after some help from Dormilich - got working! Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option. Okay, so I was thinking an If..else..if..else statement would probably be best after reading up This is what I have come up with: Code:
<script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
else{
b = (a * 10);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
}
</script>
So, I'm not too sure if I can set the Menu values as recongnisable values! Here are the values I have: <select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select> Anyone out there offer any insight? Am I going horribly wrong somewhere? Apologies for the stupidness , I am quite new to JS! Thanks in advance Hi I have the following code. What I want to do is for certain questions to remain hidden inless certain conditions are met, then they appear to be answered. I am thinking with the <div> but not sure how. I also thought maybe with css but cant write a if statement in css so that a no go. Please help. Code: <tr><td align="left">Do you own a Yorkie?<br /> <input type="radio" name="owner" value="yes" /> Yes <input type="radio" name="owner" value="no" checked="checked" /> No<br /> <!-- If answer is no above the below questions are hidden, if yes then they appear -->> <div id="breeders"> How many? <select name="qnty" size="1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5+</option></select> Are you a breeder? <input type="radio" name="breeder" value="yes" checked="checked" /> Yes <input type="radio" name="breeder" value="no" /> No</div></td></tr> JavaScript Code: I am using a onload within the form opening tag Code: function showDiv() {
if(document.forms[2].owner.value == "yes") {
document.getElementById('breeders').style.visibility = 'visible';
}
else
document.getElementById('breeders').style.visibility = 'hidden';
}
My javascript compiler is telling me that my function doesn't exist. However its just because the function isn't compiling right... if someone could give it a look and tell me what i'm doing wrong i would greatly appreciate it. Code: <script type="text/javascript">
function Country(f,s,h,k)
{
var Country=['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Missippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dekota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var first=$('#'+f).val();
var second=$('#'+s);
var hidden=$('#'+h);
if(first=="USA")
{
hidden.css('display','block');
var options="";
for(var i=0;i<=(Country.length-1);i++)
{
options+="<option value='"+Country[i]+"'>"+Country[i]+"</option>";
}
second.html("<option selected='selected'>Choose one...</option>"+options);
} else {
hidden=$('#'+k);
hidden.css('display','block');
}
}
</script>
Code: <tr style="background-color: #f4fbee">
<td width="324"><font face="verdana" size="2">9.) Country</font></td>
<td width="324">
<select name="Country" id="Country" onchange="Country('Country','state','stateother1','stateother2');">
<option value="none" selected="selected">Choose one...</option>
<option value="Australia">Australia</option>
<option value="Canada">Canada</option>
<option value="UK">United Kingdom</option>
<option value="USA">United States</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
that is where I call the function. i have a problem. i want to check that whether an element with a specific id exist on page or not. example Code:
<script type="text/javascript">
function bgcolo()
{
if(document.getElementById("jj") == null)
{
return red;
}
else
{
return green;
}
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="oo" bgcolor="return bgcolo();">bvbv</td>
</tr>
</table>
<div id="jj">fggftrytyyyyyyyyy</div>
</body><
|
|||||||