|
JavaScript - Need Help With A Simple Div Hide Script
Code:
<script type="text/javascript">
function toggleVisibility4(controlId)
{
var z = document.forms["frm_sms"]["phone"].value;
var minimumnum = 10;
var control = document.getElementById(controlId);
if (z.length <= minimumnum)
{
control.style.visibility = "visible";
}
else
{
control.style.visibility = "hidden";
}
</script>
im not sure where im going wrong i am calling this script from a " onkeyup="toggleVisibility4('arrow')" " the arrow is a div i am wanting to hide when the input field "phone" on a form id of "frm_sms" has more than 10 characters any ideas guys Similar TutorialsCode: <html>
<title> random!!</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="one" style="cursor: pointer;">
type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div>
<div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div>
<script type="text/javascript">
$(document).ready(function()
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.one').toggle(function()
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.oneone').fadeIn('slow');
}, function()
{
return false;
});
$('div.two').toggle(function()
{
$('div.oneone').hide();
$('div.threethree').hide();
$('div.twotwo').fadeIn('slow');
}, function()
{
return false;
});
$('div.three').toggle(function()
{
$('div.twotwo').hide();
$('div.oneone').hide();
$('div.threethree').fadeIn('slow');
}, function()
{
return false;
});
});
</script>
</body>
</html>
The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!! Hey everyone. I have a simple hide/show script that is doing what I want, but I was wondering if there is an easier way around having to specify show and hide requirements "onclick" each time. Here is what I've got: Javascript: Code: <script type="text/javascript">
function show(boxid) {
document.getElementById(boxid).style.display="block";
}
function hide(boxid) {
document.getElementById(boxid).style.display="none";
}
</script>
HTML: Code: <body onload="hide('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4'); ">
<div id="homePoster1"><img src="img/posters/babystory.gif" width="419" height="419" /></div>
<div id="homePoster2"><img src="img/posters/converse.gif" width="419" height="419" /></div>
<div id="homePoster3"><img src="img/posters/cookingchannel.jpg" width="419" height="419" /></div>
<div id="homePoster4"><img src="img/posters/culturesofresistance.jpg" width="419" height="419" /></div>
<div class="filmDescAll">
<h2>Film 1 title</h2>
<div id = "filmDesc1">Film 1 description</div>
<div class="more"><a href="#" onclick="show('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 2 title</h2>
<div id="filmDesc2">Film 2 description</div>
<div class="more"><a href="#" onclick="show('filmDesc2'); hide('filmDesc1'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster2'); hide('homePoster1'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 3 title</h2>
<div id="filmDesc3">Film 3 description</div>
<div class="more"><a href="#" onclick="show('filmDesc3'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc4');
show('homePoster3'); hide('homePoster1'); hide('homePoster2'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 4 title</h2>
<div id="filmDesc4">Film 4 description</div>
<div class="more"><a href="#" onclick="show('filmDesc4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3');
show('homePoster4'); hide('homePoster1'); hide('homePoster2'); hide('homePoster3');"class="more4">+ more info</a></div>
</div>
Hi, I'm trying to use the code from DHTMLGoodies' show/hide script, from he http://www.dhtmlgoodies.com/index.ht..._content_slide but I want to use it for two different classes in my HTML, as I have two sizes of header buttons (I have a taller button to cope with text that is too long to fit in one line, as it wraps around). I have created the CSS styles as given on the website, but I have made a second style, to display the taller button, but I would like to know how to make the javascript work with it. Currently I have: Code: /*********** DHTML_GOODIES SLIDING TEXT START ***********/
div#thincolumn .dhtmlgoodies_question, div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue.jpg) no-repeat top left;height: 32px;color:#FFFFFF;padding:8px 14px 0 14px;font:bold 1.1em Arial, sans-serif;overflow:hidden;cursor:pointer;}
div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue2.jpg) no-repeat top left;height:50px;}
div#thincolumn .dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
width:150px;
/* End layout CSS */
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
div#thincolumn .dhtmlgoodies_answer_content, .dhtmlgoodies_answer_content_big { /* Content that is slided down */
padding:1px;
font-size:1em;
position:relative;
}
/*********** DHTML_GOODIES SLIDING TEXT END ***********/
(div#thincolumn is the column that I place the buttons in). I added a new style, .dhtmlgoodies_question_big, to style the taller buttons, but I don't know how to change the Javascript so that it works on these divs as well as the normal, dhtmlgoodies_question divs. Near the end of the Javascript it says: Code: if(divs[no].className=='dhtmlgoodies_question'){
Is it possible to put an "or" in there and have something like Code: if(divs[no].className=='dhtmlgoodies_question')or(divs[no].className=='dhtmlgoodies_question_big'){
Please forgive my ignorance, I am fine with CSS and HTML, but I have never used Javascript before, and searching for "Javascript" and "or" on Google obviously didn't produce the result I was looking for! I don't even know if it's possible to use "or" in Javascript. I have tried duplicated the entire Javascript like this: Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
and Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question_big'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content_big';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
but now it only works for the taller buttons (which the second piece of Javascript refer to). I think it might be possible to just use one instance of the original code, and some "or" operators, but I'm not sure. Any help would be very much appreciated. Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James Im using the following script: Code: <script type="text/javascript">
function unhide(hiddentext) {
var item = document.getElementById(hiddentext);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.unhidden { display: block; }
.hidden { display: none; }
</style>
to hide and unhide a block of text on my page, using onclick events. the problem is its not allowing me to use it multiple times in a page. when i use a second instance of it, both stop working. the above demonstrated script is working with the following elements: middle (approx) of page: Code: <td class="desc_cell"><strong>Download Station</strong><br />
17" Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>
bottom of page: [code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div> I have a form that was created in Adobe Professional. I have hidden the toolbars on initial view of the form, however, the people using the form have discovered how to un-hide them. Is there any Java Script that I can add to the document that will disable certain menu commands (i.e. "Attach to E-mail")?
ok i have already found a script to hide a certin file type here it is: Code: x=getAttribute('src')x=x.substring(0, x.indexOf('.jpg')); I don't know javascript so can someone please explain what that does to me and please modify it so it will work with this Code: var displayStyle = (divIndex==selectedIndex || selectedIndex===true)?'inline':'none'; document.getElementById('game_'+divIndex).style.display = displayStyle; basically i want to 1. change the script so it finds .jpg and .JPG 2. use the script in the second script below to basically hide the objects with that extension you can use the second script or make a new one if you want... 3. make it so i can make a link go to javascript:functiontocall() and thats it Thanks in advance and please help it shouldn't take more then a few minutes. Helloo Im new to javascript.. I need help badly... here are two tabless. 1. information of a friend. 2nd table i get when i click da image (ADD ANOTHER FRIEND) but, on validation and submission.. the second table is not showing upp... When i once click ADD FRIEND.. i want the table to show up on reload and validation.... Thanks Here is my code <? if (isset($_POST['submit'])) { if (!$frndname) { $frndname_error = 1; $problems=1; } if (!$frndcity) { $frndcity_error = 1; $problems=1; } ///doo db stuff insertion } ?> <!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 showTable() { var table = document.getElementById("myTable"); if (table) table.style.display = "block"; var div = document.getElementById("frndimg"); if(div) div.style.display = "none"; } </script> </head> <body> <form action="" method="POST" name="form1"> <?php if(!isset($_POST['submit']) or $problems) { ?> <table> <tr> <td colspan="2"> <table width="21%"> <tr> <td width="3%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="3%" align="left" valign="top"> </td> <td width="16%"><? if ($frndname_error) { echo ("<font color='#FF0000'>Name:</font>"); } else { echo ("Name:"); }?> <b><font color="#FF0000">*</font></b><br> <input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td> <td width="81%" colspan="3">City: <b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td> </tr> </table></td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td > <div style="float:left;cursorointer;"> <img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg"> </div> </td></tr> <tr> <td colspan="2"> <table width="100%" id="myTable" style="display:none;"> <tr> <td width="4%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br> <input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td> <td width="47%" colspan="3">City: <b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td> </tr> <tr> <td width="4%" align="left" valign="top"> </td> <td>Phone Number: <b></b><br> <input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td> <td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td> </tr> <tr><td> </td></tr> </table> </td></tr> <tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr> <tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr> </table> <? } ?> </form> </body> </html> Hi, I need a very simple script that will do the following : I have a HTML form. I have an input call "title". Say I wrote "fleur-de-lys" I have a text area call "text" When I hit the submit button I want to do : 1. Create a HTML webpage with the name in input : fleur-de-lys.html 2. Add the text in "text" somewhere in the body of that new file fleur-de-lys.html 3. Add a preview of that text somewhere in my index page Basically it's like you post a new article on wordpress or whatever, but I just want something simple no database and just need help on how I do this. Thank you very much ok i am trying to make a countdown timer from 20 seconds when i click start where am i going wrong with this Code: <html>
<head>
</head>
<body>
<script type="text/javascript">
function timer()
{
var milisec=0
var seconds=20
document.counter.d2.value=20
function display()
{
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
display()
}}
</script>
<form name="counter">
<center>
Text Timer<br>
<input type="text" size="30" name="d2"> <br>
<input type="button" onclick="timer()" value="click me to start">
</center>
</form>
</body>
</html>
Hi all, I know this sounds absurd, but I like to display a clickable image in javascript. I have searched the net for like 2 hours, and I simply CANT find any page that can help me with that extremely simple javascript. This is how its look like in html: Code: <a href="http://www.horse.com"><img src="jul.jpg" width="468" height="80" border="0" /></a> Please! How can I make that simple code in javascript?! Thanks! Hey, so I have successfully used this tutorial; http://articles.sitepoint.com/articl...y-javascript/3 to create a web page that "smoothscrolls" down to a certain point of content on the page. So, I know the java works! My problem is, I have changed the website to be along the X axes and not the Y, so instead of it scrolling "down" the page, I would like it to scroll from left to right. i.e on the X axes not the Y. Is there anyway of doing this by editing that java file? All my buttons work and display the correct part of the website, but the java doesn't work slidiing sideways. Thank you in advance! Darren I am a very novice web coder and can't get this to work... I've tried everything and am getting no where but frustrated! Thanks in advance!! Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function calculateSavings()
{
var lastBill = eval(document.theForm.elements[0].value);
var frequencyRating = eval(document.theForm.elements[1].value);
var savingsRate = .05;
var annualSavings = 0;
/*
if (frequencyRating == 'every day)
{
savingsRate = .01;
}
else if (frequencyRating == 'weekly)
{
savingsRate = .05;
}
else if (frequencyRating == 'monthly')
{
savingsRate = .15;
}
else if (frequencyRating == 'yearly')
{
savingsRate = .2;
}
*/
annualSavings = lastBill * savingsRate;
document.write(annualSavings);
}
// End -->
</SCRIPT>
</head>
<body>
<form name="savingsCalcForm">
How much was your last bill?
<br><INPUT TYPE="text">
<br>
<br>
How often are you using your tractor?
<br><input type="radio" name="group1" value="every day"> every day<br>
<input type="radio" name="group1" value="weekly "> weekly<br>
<input type="radio" name="group1" value="monthly"> monthly<br>
<input type="radio" name="group1" value="yearly"> yearly<br>
<br>
<br>
<INPUT TYPE="button" VALUE="calculate savings" onClick="calculateSavings();">
</form>
</body>
</html>
Hey guys, so I am a designer (not a developer) doing a site for someone. I am playing with some simple free javascripts. I have lightbox and toggler. Both work great individually. They are conflicting and everywhere online says to set the both to onLoad in the body tag. Sounds easy enough. But I can't seem to figure out the call for this script: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/expand.js"></script>
<script type="text/javascript">
$(function() {
$("h2.expand").toggler({method: "fadeToggle"});
});
//--><!]]>
</script>
<body onload="toggler();initLightbox()"> is what is seems like it should be for me. But that isn't working at all. Please help! I feel like I have tried every possible name with the toggler()... If you need more, I can point you to the site itself and you can see all of the (messy) code. I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head>
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';
}
</script>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>
Here is a demo of it in action: http://www.mousegrey.com/layers.html Hi all, Did some searching but couldn't find anything to help me. I'm looking for a simple quiz script - basically, there would be an image on the screen (would be great if it was randomly generated out of maybe 100 different choices). The visitor would then click on one of two buttons (this is the "quiz" part) answering a question about the photo which was displayed. The script then tells the visitor if they got the answer right or wrong and then loads a new image for them to try again. It would be great if the script could keep a "streak counter" based on how many images a visitors got correct in a row. So for example: Question: is this a cat or a dog? [random image of dog or cat] [button to answer dog] [button to answer cat] Would this be fairly easy to implement (is there something like this already around) or is it more complicated than that? Thanks a bunch in advance for any help you can give. I'm in search for a simple and clean timed rotation script. I have these quotes, and right now they're coded so that a single quote displays and changes upon refresh. The script is really clean, and I would like to maintain the cleanliness but make the images rotate every couple of seconds. Here's the script... Code: <script type="text/javascript"> quote = new Array(3); quote[0] = "Quote 1"; quote[1] = "Quote 2"; quote[2] = "Quote 3"; index = Math.floor(Math.random() * quote.length); document.write(quote[index]); </script> It's probably a really simple piece of coding, but I'm still new to JavaScript, so it's obviously out of my range. I appreciate anyone who will help Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened. Thanks in advance to anyone who can help out a newbie in need. Code: function uservalidate() {
if (document.getElementById("user").value < 5)
{ document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
else
{
document.getElementById("userdiv").innerHTML = ""
}
}
Code: <body>
<form id="form1">
<input type="text" id="user" onblur="uservalidate()" />
<div id="userdiv"></div>
</form>
</body>
</html>
I am using the simple password script from http://www.allwebco-templates.com/su...ect_simple.htm where the password is contained in the header script. I need to change the password, e.g. from Jan to Feb to Mar to Apr etc. How could I modify the script to contain the list of passwords, and have it automatically utilise/apply the correct password for the current month? To a non-javascript person like me this seems like it should be simple..... Can anyone please suggest a solution? Thanks muchly in advance. I'm trying to built a simple Javascript page that will serve the purpose of merging the values inputted into a form, and then using concatenation to merge these values in with other text to form several lines of commands that would be entered into a router to perform some task. So in other words, it's just a "Merge" script. I should mention that I'm just starting to learn Javascript. I actually haven't been finding Javascript as easy as I thought it would be to learn, and I think it's because there are several ways to do the same thing and I wouldn't be surprised if my problem is I'm using two different methods here...or just using the completely wrong method.... I've seen examples of using 'for' loops and arrays in forms, and I still can't get my head around that. If possible for now I just wish to call in the values and concatenate them, but maybe I do need a loop I don't know Anyway, at this point, my only wish is to be able to get the script to concatenate the values, and then later I'll add the rest of the text it will merge in with and have it write to the page instead of the console. So here is what I have right now. It only partially works (I'm only writing to the console in FireFox at the moment to debug while I test, so that is why you see console.log instead of document.write or whatever. There are 4 fields in the form, and for example, if I enter in each field one word: This is a test The ONLY result I get when submitting the form is the word "This". Then the form is cleared out of all values that were entered. I'd like it to grab all the values at once but that isn't happening. Also, you'll notice I have some 'var' statements commented out. I was trying to use them so that I can later shortcut my script by concatenating using a shorter variable. (ie - using the variable 'cluster' instead of 'document.forms.myForm.cluster.value' when I'm writing the rest of the script). However something isn't right as no matter where I try putting the var statements I get errors that those variables are undefined. I even tried defining them at some point first with some random value but that didn't help either), so that's why I commented them out for now. anyway, here is my feeble attempt at writing this script, any help or guidance would be much appreciated. Code:
<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Router Subnet Commands</title>
</head>
<body bgcolor="#FFFFFF">
<script language="Javascript" type="text/javascript">
//var cluster = document.forms.myForm.cluster.value;
//var subnetip = document.forms.myForm.subnetip.value;
//var routerip = document.forms.myForm.routerip.value;
//var cidr = document.forms.myForm.cidr.value;
function merge() {
console.log(document.forms.myForm.cluster.value) + console.log(document.forms.myForm.subnet.value) + console.log(document.forms.myForm.router.value) + console.log(document.forms.myForm.cidr.value);
}
</script>
<form id="myForm">
<input name="cluster" id="cluster"/> cluster number <p>
<input name="subnetip" id="subnetip"/> subnet IP address <p>
<input name="routerip" id="routerip"/> router IP address<p>
<input name="cidr" id="cidr"/> CIDR <p>
<input type="submit" value="Get Commands" onclick="merge()" />
</form>
</body>
</html>
Any advice would be much appreciated. Thanks Nat |
|||||||