|
JavaScript - Couple Questions: (basic Stuff) Changing Things With A Button!
hey guys. got acouple questions for my website. im more of a html guy.. and i usually find my scripts online. i reeaaallly appreciate all answers!
i have a box: <img id="imgSearch" src="" alt="Websites" /> <input type="button" value="Toggle Search" id="btnSearch" /> ^being the button to toggle between websites. basically i'd like this button to toggle between different websites when clicked. secondly: changing span tag colors html code: Traffic Light: <span id="trafficLight"></span> <input type="button" value="Prevent Accident" id="btnTraffic" /> i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green and last: changing the font in a bold tag bold by pressing a button html code: (note, the font weight in normal in css for bold) <b>i want this bold when you hit the button!</b> <input type="button" value="Set Bold" id="btnBold" /> Similar TutorialsHi there, I've been a web designer for a while and have always used basic javascript in my pages, but decided recently that I would get right into the nitty gritty, however I'm having a problem with some really basic code. Secondly, the book which I'm using is from 2005 and is extolling the virtues of event listeners and so on, is this still the accepted means of handling events? And thirdly, are there still chasms between the browsers in compatability in this area? I'm aware IE has become more and more compliant recently, is it still necessary to write code to cover different browsers or does it all pretty much work nowadays (besides older browsers)? So, to the code! Basically, the browser doesn't get into the function to display the alert(), and i'm not sure why. (Told you it was basic ) Code: <html>
<head>
<title>Javascript Testing</title>
<script type="text/javascript">
<!--
function aKeyWasPressed(e){
alert('Sausages!');
}
var textarea = document.getElementById('myta');
textarea.addEventListener('keyup', aKeyWasPressed, false);
-->
</script>
</head>
<body>
<textarea id="myta"></textarea>
</body>
</html>
Thanks! Hey all, I'm trying to fully understand javascript and have a couple of questions I was hoping you could answer for me. I'm working through a book and in the book I'm creating a Bingo card that generates a random number. I'm pasting the full script below just in case it's needed. Code: function initAll () {
for(var i=0; i<24; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare= "square" + thisSquare;
var colPlace= new Array (0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis=colPlace[thisSquare] *15;
var newNum=colBasis +getNewNum()+1;
document.getElementById(currSquare).innerHTML=newNum;
}
function getNewNum() {
return Math.floor(Math.random() *15);
}
//-->
</script>
1. What does the [thisSquare] mean in this line of code that is bolded? I mean, I know thisSquare is whatever i is, but am I multiplying it by colPlace or what? 2. Lastly I'm confused by this part of the above code Code: var newNum=colBasis +getNewNum()+1; Why add the +1? I mean, i think getNewNum is set to pull a random number between 1 and 14. If you want to pull a number between 1 and 15, why not multiple Math.random() *16 instead of 15. Am i missing something? Sorry, I'm just not understanding why use the +1 So how do i get to backgroundColor value to change it? a.backgroudColor('black'); or how ? Code:
var a = makeDiv(p.age , {
backgroundColor: 'gray',
color: 'white',
padding: '2px 6px',
fontSize: '15pt',
});
Hi, im sorta a newbie but have a few questions i cannot find online anywhere. By the way im trying to create a chrome extension . Its a fairly simple extension, all i want it to do is select a few buttons automatically when the page is loaded. Without me having to click anything. A bot persay. How to automatically select a button/drop down menu How to save a form How to submit a form to a website How it works if you dont get it? Selecting a certain size like S/M/L, color, or anything of that nature AUTOMATICALLY WITHOUT HAVING TO CLICK ANYTHING. Which then adds to my cart. Thats all i want it to really do. Thanks for reading. Here are the coding.. Code: <jsp:useBean id="chequeStopBean" scope="session" class="my.com.infopro.ibank.ui.bean.ChequeStopBean"/>
<jsp:useBean id="labelBean" scope="session" class="my.com.infopro.ibank.ui.bean.LabelBean"/>
<jsp:useBean id="lang" scope="session" class="my.com.infopro.ibank.ui.bean.LanguageBean" />
<%@ page language="java" import = "java.util.*" errorPage="" %>
<%@ page import="my.com.infopro.ibank.dto.ChequeDTO"%>
<%
request.getSession(true);
String contextPath = request.getContextPath();
chequeStopBean.queryAccList();
//RequestDispatcher dispatcher = null;
%>
<html>
<head>
<title><%=labelBean.getLabel("STOP_CHEQUE")%></title>
<meta HTTP-EQUIV="Pragma" content="no-cache">
<meta HTTP-EQUIV="Expires" content="-1">
<jsp:include page="/ScriptHeader.jsp"/>
<script language="javascript">
function validateAndSubmit() {
var msg1 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg2 = "<%=labelBean.getLabel("MSG_CANNOT_CONTAIN_CHARACTER")%>";
var msg3 = "<%=labelBean.getLabel("MSG_IN_THE_FIELD")%>";
var msg4 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER")%>";
var msg5 = "<%=labelBean.getLabel("WITH")%>";
var msg6 = "<%=labelBean.getLabel("TO")%>";
var msg7 = "<%=labelBean.getLabel("MSG_CHARACTER")%>";
var msg8 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID_NUMBER")%>";
var msg9 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg10 = "<%=labelBean.getLabel("MSG_WITH_EXACTLY")%>";
var msg11 = "<%=labelBean.getLabel("MSG_WITH_VALID_DATE")%>";
var msg12 = "<%=labelBean.getLabel("MSG_EXAMPLE_DATE")%>";
var msgNum11 = "<%=labelBean.getLabel("MSG_WITH_A_MINIMUM_VALUE_OF")%>";
var msgNum12 = "<%=labelBean.getLabel("MSG_WITH_A_MAX_VALUE_OF")%>";
var msgNum13 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_ROUND_INETEGER")%>";
var msgNum14 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_AT_MOST")%>";
var msgNum15 = "<%=labelBean.getLabel("MSG_DECIMAL_PLACES")%>";
var msgEnter = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID")%>";
var errorMsg = "<%=labelBean.getLabel("MSG_LOWECASE_ALPHABET_ALLOWED")%>"
var radioButtons = document.getElementsByName("radio");
for (var x = 0; x < radioButtons.length; x ++) {
if (radioButtons[x].checked) {
if(radioButtons[x].value=="1")
{
if (! validateTextEntry(form.chqNum, "<%=labelBean.getLabel("CHQNUM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNum, "" + " ",1, msg2,"" ))
return false;
}
else if(radioButtons[x].value=="2")
{
if (! validateTextEntry(form.chqNumFrom, "<%=labelBean.getLabel("CHQNUMFROM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateTextEntry(form.chqNumTo, "<%=labelBean.getLabel("CHQNUMTO")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNumFrom, "" + " ",1, msg2,"" ))
return false;
if (! validateAlphabet(form.chqNumTo, "" + " ",1, msg2,"" ))
return false;
if(form.chqNumFrom.value == form.chqNumTo.value){
alert("<%=labelBean.getLabel("MSG_CANNOT_SAME")%>");
return false;
}
}
}
}
return true;
}
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
}
//-->
<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload="show('single')">
<form name="form" method="POST" action="<%=contextPath%>/ChequeStopServlet?tranx=confirm" dir="<%=lang.getDir()%>" >
<table width="500" align="center">
<tr>
<td align="left" colspan="3"> </td>
</tr>
<tr>
<td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" class="subHeader"><%=labelBean.getLabel("CHQ_DETAIL") %></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<p class="statusError">
<%if(request.getParameter("error") != null) out.println(labelBean.getLabel(request.getParameter("error"))); else out.println("");%>
</p>
</div></td>
</tr>
</table><br />
<table width="500" align="center">
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("ACC_NUMBER")%></td>
<td width="10" class="lbl">:</td>
<td width="305" align="left">
<select size="1" name="accNum">
<%
for (Iterator iter = chequeStopBean.getAccList().iterator(); iter.hasNext();) {
ChequeDTO chqDto = (ChequeDTO)iter.next();
%>
<option value="<%=chqDto.getAccNum()%>"><%=chqDto.getAccNum()%></option>
<% } %>
</select>
</td>
</tr>
<tr>
<td align="right">
<input type="radio" class="radioStyle" name="radio" value="1" onfocus="show('single');hide('multiple');hide('multiple1');return true;" checked="checked" >
<%=labelBean.getLabel("STOP_SINGLE")%>
</td>
<td> </td>
<td>
<input type="radio" class="radioStyle" name="radio" value="2" onfocus="hide('single');show('multiple');show('multiple1');return true;">
<%=labelBean.getLabel("STOP_MULTIPLE")%>
</td>
</tr>
<tr id="single">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNum" type="text" size="15">
</td></tr>
<tr id="multiple" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("FROM_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumFrom" type="text" size="15">
</td></tr>
<tr id="multiple1" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("TO_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumTo" type="text" size="15">
</td></tr>
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("REASON")%></td>
<td class="lbl" width="10" >:</td>
<td colspan="2">
<select name="reason">
<option value="Lost"><%=labelBean.getLabel("LOST")%></option>
<option value="Stolen"><%=labelBean.getLabel("STOLEN")%></option>
<option value="Payment Cancellation"><%=labelBean.getLabel("PAYMENT_CANCELLATION")%></option>
<option value="Others"><%=labelBean.getLabel("OTHERS")%></option>
</select>
</td>
</tr>
<br/>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="button" type="submit" value="Next" onClick="return validateAndSubmit();" >
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="left" class="footer"><%=labelBean.getLabel("NOTE")%>
</td>
</tr>
<tr><td colspan="3" class="footer">
<ul>
<li><%=labelBean.getLabel("THE_ASTERISK")%></li>
</ul>
</td>
</tr>
</table>
<jsp:include page="/Footer.jsp" />
</form>
</body>
</html>
This is error for the first page.. This is picture that which i wan.. Thanks! I am trying to make a button that would change the background image whenever somebody clicks it. I have tried something along the lines of this: Quote: <input type="button" value="Pattern1" onClick="background-image: url(background.png);background-repeat: no-repeat;"> and, Quote: <input type="button" value="Pattern2" onClick="background: url(background.png);background-repeat: no-repeat;"> as you can see, I am a beginner at coding in general so any help is appreciated. My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong. So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body>
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" class="disabled"/><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</body>
I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? I'm doing an assignment and I'm trying to get these codes to work but nothing works. Can anyone help please? Code: <script type = "text/javaScript">
var animal = prompt("Please enter the name of an animal (elephant would be good!)","");
animal = animal.toUppercase();
if (animal="ELEPHANT")
{
alert ("Elephants are very large and also gentle.");
alert ("Have you ever seen an elephant in the circus?");
}
else
{
alert("You have entered an unknown animal which is called a " + animal);
alert("This program will self-destruct in 10 seconds");
alert(" 10 - 9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 ...");
}
</script>
Code: <script type = "text/javaScript">
var rating = prompt("Enter a movie rating (G, PG, R...)","");
rating = rating.toLowercase()
switch (rating)
{
case "g":
alert("G means this movie is rated for General Audiences");
break;
case "pg":
alert("PG means this movie is rated for General Audiences with Parents attending");
break;
case "r":
alert("R means this movie is rated for Restricted Audiences. May contain violence.");
break;
default: alert ("This program is rated G. We are not allowed to comment on the movie rating " + rating);
}
</script>
I've put together a spoiler bb code, and I've noticed 2 bugs with it - I'm thinking that it's to do with the javascript end of the code. when the code is used, the page has to be refreshed for the spoiler to open and work correctly, also if there is 2 spoilers on the same page, if i click the second one, it opens the first one and not itself. I didn't type the javascript code I only did the html and css end, so I'm not sure what's going on. If any of you can help me I'd be really grateful. Here is the code: Code: <html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.show
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:25%px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
.hide
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
min-width:25px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function hide(id){
document.getElementById(id).style.display = 'none';
}
function show(id){
document.getElementById(id).style.display = '';
}
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</head>
<body>
<div class="spoiler"><img src="http://i.imgur.com/s5tS1.png" align="left"><img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div id="show"><input type="button" class="show" onclick="hide('show'); show('hide'); showSpoiler(this);" value="Show" />
</div>
<div id="hide" class="inner" style="display:none;">
<input type="button" class="hide" onclick="hide('hide'); show('show'); showSpoiler(this);" value="Hide" />
<br /><br />{param}<br /></br>
</div>
</div>
</body>
</html>
Hi! All I would like to have a way to do my application using a simple way. I have a genealogy site, since a long time ago. I have near 10,000 pages (10,000 names) on a free hoster. Everything works fine. But I'd like to do the conversion from my FTW (Familky tree maker) to html page ,myself. I've use VB6 (Visula Basic 6) to do the conversion of all the pages, including all the html code on each page to link to other page. Like ,click on the father's name or the childre's name and it load the html page of this INDIVIDUAL. First : I know very well VB6 , moderate in HTML , poor in Javascript. Second : I have 10,000 pages (One for each individual), so is there a way to only have a template page (on the server side = my hoster) and a few text file (.txt) to pick up the data. Cause there are only 40-50 string data to put on each page but a lot of html code to make a good looking page. So having a template html page that we can just add at the right place ,the data of this individual then send it would be much smaller. So instead of a lot of pages there will be only a few. Third : I'd like to place on the viewable page, 3 cascading "selection list". The first one will be populated with the letter from A to Z , from the HTML code. The second list would have all the name of the family , like Smith, Johnson, rimes etc , ordered. I already have a text file of those names. And the third list , will have all the first name like Daniel Steve, Leann, ordered too, and I also have this ordered text file. So in a few click , we will be able to go to another individual. Have try a lot of things but never been able to do it. I like to keep the text file for data, as it's very easy to change using VB6 and easy to read, too. As written before, it must be easy to understand. I don't mind giving a small donation to have it, cause I really try hard to do it without been able to do it working. And it could be useful to other, too. Thanks at advance. hey guys, I'm not the quickest running in the race, but I'm slowly learning JavaScript. I'm attempting to use the jQuery iviewer to control the viewing of images. I'm essentially making my own slideshow. In any event, I'm trying to tag a map along with the image. The only way I know of doing this is with standard markup doing usemap="#map_name". so here's my JavaScript code, and the HTML to follow. Code: var $ = jQuery;
$(document).ready(function(){
$("#viewer").iviewer(
{
src: "images/page11.jpg",
update_on_resize: false,
initCallback: function ()
{
var object = this;
$("#in").click(function(){ object.zoom_by(1);});
$("#out").click(function(){ object.zoom_by(-1);});
$("#fit").click(function(){ object.fit();});
$("#orig").click(function(){ object.set_zoom(100); });
$("#update").click(function(){ object.update_container_info();});
},
onMouseMove: function(object, coords) { },
onStartDrag: function(object, coords) { return false; },
onDrag: function(object, coords) { }
});
$("#viewer2").iviewer(
{
src: "images/page11.jpg",
update_on_resize:false,
initCallBack: function ()
{
document.images[0].useMap = "#map1";
}
});
});
And the 'scaler' Code: function scalecoordimages(elImage, amount){
var elMap = getMap(elImage)
elImage.width *= amount;
elImage.height *= amount;
if (null != elMap){
for (var intLoop = 0; intLoop < elMap.areas.length;
intLoop++) {
var elArea = elMap.areas[intLoop];
var coords = elArea.coords.split(",");
var scaledCoords = "";
for (coords in coords) {
scaledCoords += (coords[coord] * amount) + ",";
}
elArea.coords = scaledCoords;
}
}
}
and now the HTML where this is all delivered. Code: <div class="wrapper">
<div id="viewer2" class="viewer" style="margin: 50px auto;"></div>
</div>
the 'wrapper' is because in Safari the overflow doesn't hold properly and breaks. the Map is just rectangles...it's below > Code: <map name="map1" id="map1">
<area class="hotspot" shape="rect" coords="105, 1110, 371, 1125" href="" onMouseOver="tooltip.show('<ul>Northeast States:<br /><li>Connecticut</li><li>Maine</li> <li>Massachusetts</li><li>New Hampshire</li><li>Rhode Island</li><li>Vermont</li><li>New Jersey</li><li>New York</li><li>Pennsylvania</li></ul>');" onMouseOut="tooltip.hide();" >
<area class="hotspot" shape="rect" coords="105, 1135, 371, 1150" href="" onMouseOver="tooltip.show('<ul>Midwest States:<br /><li>Indiana</li><li>Illinois</li><li>Michigan</li><li>Ohio</li><li>Wisconsin</li><li>Iowa</li><li>Kansas</li><li>Minnesota</li><li>Missouri</li><li>Nebraska</li><li>North Dakota</li><li>South Dakota</li></ul>');" onMouseOut="tooltip.hide();"></area>
<area class="hotspot" shape="rect" coords="105, 1160, 371, 1175" href="" onMouseOver="tooltip.show('<ul>Southern States:<br /><li>Delaware</li><li>Florida</li><li>Georgia</li><li>Maryland</li><li>North Carolina</li><li>South Carolina</li><li>Virginia</li><li>West Virginia</li><li>Alabama</li><li>Kentucky</li><li>Mississippi</li><li>Tennessee</li><li>Arkansas</li><li>Louisiana</li><li>Oklahoma</li><li>Texas</li></ul>');" onMouseOut="tooltip.hide();"></area>
<area class="hotspot" shape="rect" coords="105, 1185, 371, 1200" href="" onMouseOver="tooltip.show('<ul>Western States:<br /><li>Arizona</li><li>Colorado</li><li>Idaho</li><li>New Mexico</li><li>Montana</li><li>Utah</li><li>Nevada</li><li>Wyoming</li><li>Alaska</li><li>Californai</li><li>Hawaii</li><li>Oregon</li><li>Washington</li></ul>')" onMouseOut="tooltip.hide();"></area>
</map>
Any help is appreciated. Thank you. I have an ajax member search form that I'm just about done with but I have a couple of really irritating firefox issues. The first one is the lack of support of the click() method. I added the following but it still doesn't want to work: Code: <script>
if(typeof HTMLElement != 'undefined' && !HTMLElement.prototype.click) {
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
}
</script>
The second issue I'm having is with dependent dropdown selects not hiding in firefox. This seems to be due to the other functions that need to trigger onload and is dependent on what order it's loaded. Here's how I'm handling the onload functions: Code: <script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
ajaxFunction(document.getElementById('country').value);
handleOnChange(country);
setupDependencies('cbcheckedadminForm', 'adminForm', 'locationsearch');
handleOnChange2(cb_state);
});
</script>
I don't have an issue with either of these in chrome. IE is a WHOLE other story, it's all kinds of wonky there. I still need to go through and do some debugging for that. Any quick ideas off hand on these two issues? I'll try and post the full php file in a reply. Hey guys, as of now these lines of code... Code: function lettergrade(grade) {
if (grade >= 9){
document.write("A")
}
else if (grade >= 8){
document.write("B")
}
else if (grade >= 7){
document.write("C")
}
else{
document.write("F | Warning, your letter grade is very low.")
}
};
function goletter() {
document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) +
", <br \> Donald's letter grade on the test is: " + lettergrade(donald))
}
...are supposed to display the "____'s letter grade on the test is: A" or the respective letter, but instead it is displaying this... ABF | Warning, your letter grade is very low.Sam's letter grade on the test is: undefined, Sally's letter grade on the test is: undefined, Donald's letter grade on the test is: undefined Any ideas as to why this is happening? I am a novice javascript user so if there are any good alternatives that are pretty basic i'm open to ideas. Thanks guys. Hello, Problem 1: I have a function and it sets a value to a certain number according to the input. However, I don't want the function to print out the value to the screen, but instead temporarily save it for me to use throughout the whole script. I am a newbie and please help me. For example, I make this code: function add1(x) { var x = x + 1 return x; } and I call the function: add1(0); document.write("value = " + x + "<BR>"); Whenever I do this, document.write doesn't print out value = 1, it doesn't even print anything except for the headers, etc. Is there anyway to set the var x to be a value valid throughout the whole script instead of just the function itself? I really need help on this, thanks. Problem 2: I want to get a code working. Basically, I use a ram to "ram the gate". I set the damage done each turn, and the Gate's Health too. So for example, my ram's damage is 10 and the gate's health is 200. It would take 20 times to totally breach the gates(i.e., for gate health to become 0). When I use the following code, the total damage is the same throughout the whole looping until the gatehealth reaches 0 which makes it boring, is there anyway to modify or improve the script such that when I loop, the MiscDamage would be different for all the turns? thanks! Once again I apologize for asking such a noob-ish and very strange.... question. Quote: <script language="JavaScript" type="text/javascript"> <!-- // Begin function RamGates(Ram, Attack, Gate) { //introducing variables to be used var BaseDamage = 0; var FullDamage = 0; var MiscDamage = 0; var TotalDamage = 0; var GateHealth = 0; switch (Ram) { //ignore this part just comparing ram types case "Explosive": BaseDamage="10"; break; case "Wooden": BaseDamage="20"; break; case "Steel": BaseDamage="30"; break; case "", "?": default: BaseDamage="Failed to recognize Ram"; } switch (Attack) { //ignore this just comparing attack values case 0: FullDamage = BaseDamage; break; case 1: FullDamage = (BaseDamage*2)-8; break; case 2: FullDamage = (BaseDamage*2)-6; break; case 3: FullDamage = (BaseDamage*2)-4; break; case 4: FullDamage = (BaseDamage*2)-2; break; case 5: FullDamage = BaseDamage*2; break; case "", "?": default: FullDamage="Failed to recognize Attack"; } switch (Ram) { //this part is what i need help on, i need the loop function to keep using this to generate different "lucky damages" each time to make it interesting, i.e., first ram = 11 second ram = 16 third ram = 14 and so on..... case "Explosive": MiscDamage = Math.floor(Math.random()*21+10); break; case "Wooden": MiscDamage = Math.floor(Math.random()*6+0); break; case "Steel": MiscDamage = Math.floor(Math.random()*11+5); break; case "", "?": default: MiscDamage="Failed to recognize Ram"; } switch (Gate) { //ignore this part just comparing gate types to generate gate health case "Wooden": GateHealth = 50; break; case "Brick": GateHealth = 75; break; case "Small Stone": GateHealth = 90; break; case "Large Stone": GateHealth = 120; break; case "Granite": GateHealth = 140; break; case "Iron": GateHealth = 175; break; case "R Iron": GateHealth = 190; break; case "Thick Iron": GateHealth = 210; break; case "Steel": GateHealth = 230; break; case "R Steel": GateHealth = 250; break; case "Thick Steel": GateHealth = 275; break; case "Steel Iron Mix": GateHealth = 280; break; case "Thick Steel Iron Mix": GateHealth = 300; break; case "Strong Ruby Steel Mix": GateHealth = 400; break; case "Strong Sapphire Steel Mix": GateHealth = 450; break; case "R Thick Large Diamond Steel Mix": GateHealth = 500; break; case "", "?": default: GateHealth = "Failed to recognize Gate"; } TotalDamage = FullDamage + MiscDamage; with (document) { write ("Soldiers, " + "RAM THE GATES!" + "<BR>"); } while (GateHealth >= 0) //loops until gate health is lower than 0 { //need help! how to make it such that the loop will rerun the switching of ram for generating random misc(lucky) damages document.write ("Lucky Damage done = " + MiscDamage + "<BR>"); document.write ("Total Damage done = " + TotalDamage + "<BR>"); var GateHealth = GateHealth - TotalDamage document.write("Current GateHealth = " + GateHealth + "<BR>"); } } RamGates("Explosive", 5, "R Thick Large Diamond Steel Mix"); //function calling // End --> </script> Hi all, I'm quite new to Javascript, and I'm stuck with a problem here. I have a website, I won't go in to detail, but it generates some javascript code for the user. Well, that's the idea. The user puts this javascript on his or her website. Now everytime the page with that javascript is loaded, a page on my server is called, and is supposed to display something on the place of the javascript of that website. I however have not the slightest clue how to do this. The script on my server has to get some values from a database (I'll be doing this with php). Therefore are some variables needed, like ID's. Those are put in the javascript at the website of that person. (I know they could just change it, but that'd only disadvantage them) And example of the code the person with the website would get is this: (This was also generated on user basis somewhere, which does about the same thing) Code: <script language="javascript" type="text/javascript" charset="utf-8"> var border = '#000000'; id = 1337; </script> <script language="JavaScript" type="text/javascript" src="http://somesite.com/scriptname.php"> </script> If you don't understand what I'm trying to do here, please ask, because I might not've explained it clear enough. Thanks, lordstyx. [edit] Someone said to look in the direction of XMLHttpRequest. I don't really know what that is, but I'll try and find a bit more info about it. ... like if you input text, you can't select it by sweeping it with the mouse, or shift-left arrow. Which I thought were out of the box features. You can see it in the bottom right corner of the map here. I don't think the autocomplete has anything to do with it (I disconnected that and nothing changed) but maybe because it gets made by innerhtml? any suggestions welcome. Just wondering if it's possible to prevent a page displaying until the content is fully loaded. I have a form with a load of check boxes that reloads itself on each user click and it would be nice to smooth things out a little, e.g. hold a screenshot of the page until the reload is complete and then instantly show that one. Stupid question? Cheers, Nick Hello, sorry to bother you all - I am quite new to javascript, i have found an engine that i would like to edit, in the following javascript code, it will contain code on moving a player to the left, what i want is for every 32px it moves the player left, i want it to also to scroll the map at the same time (it's all contained in a div called "global_map") - Please help me, i am in urgent need of help please and thank you guys! Code: function player_move_left(user_id, bloc_id, charaset, prefix)
{
var player_id = prefix + user_id;
var next_left_pos = Math.round((parseInt(document.getElementById(player_id).style.left) - tile_size + player[user_id].left_gain) / tile_size);
var next_top_pos = Math.round((parseInt(document.getElementById(player_id).style.top) + player[user_id].top_gain) / tile_size);
//var next_lower_bloc = 'l' + next_left_pos + '-' + next_top_pos;
//var next_upper_bloc = 'u' + next_left_pos + '-' + next_top_pos;
var next_event_bloc = 'i' + next_left_pos + '-' + next_top_pos;
if ( map_pass[next_top_pos][next_left_pos] )
{
if ( user_id == my_user_id )
{
move_update(bloc_id, -1, 0);
}
document.getElementById('charaset_' + user_id).style.top = -player[user_id].height + 'px';
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[1] + ') + \'px\';', 62);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[2] + ') + \'px\';', 125);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[3] + ') + \'px\';', 187);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[4] + ') + \'px\';', 250);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[5] + ') + \'px\';', 312);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[6] + ') + \'px\';', 375);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[7] + ') + \'px\';', 437);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[8] + ') + \'px\';', 500);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[9] + ') + \'px\';', 562);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[10] + ') + \'px\';', 625);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[11] + ') + \'px\';', 687);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[12] + ') + \'px\';', 750);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[13] + ') + \'px\';', 812);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[14] + ') + \'px\';', 875);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[15] + ') + \'px\';', 937);
setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[16] + ') + \'px\';', 1000);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + player[user_id].width + 'px\';', 63);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 2) + 'px\';', 188);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 3) + 'px\';', 313);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'0px\';', 438);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + player[user_id].width + 'px\';', 563);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 2) + 'px\';', 688);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 3) + 'px\';', 813);
setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'0px\';', 938);
/*if ( (parseInt(document.getElementById(player_id).style.left) - tile_size + player[user_id].left_gain) > parseInt(document.getElementById(bloc_id).style.left) )
{
setTimeout('player_move_left(\'' + user_id + '\', \'' + bloc_id + '\', \'' + charaset + '\', \'' + prefix + '\')', 1000);
}
else
{*/
if ( prefix == 'p' )
{
if ( user_id == my_user_id && events_placement[next_top_pos][next_left_pos][0].length > 0 )
{
if ( path_finished )
{
setTimeout('exec_event(' + user_id + ', ' + next_left_pos + ', ' + next_top_pos + ', 0);', 1000);
}
}
else
{
setTimeout('player[' + user_id + '].moving = false;', 1000);
}
}
/*}*/
}
else
{
document.getElementById('charaset_' + user_id).style.top = -player[user_id].height + 'px';
if ( prefix == 'p' )
{
if ( user_id == my_user_id && events_placement[next_top_pos][next_left_pos][1].length > 0 )
{
if ( event_data[next_event_bloc].changedir )
{
document.getElementById('charaset_' + next_event_bloc).style.top = '-' + (parseInt(document.getElementById('charaset_' + next_event_bloc).style.height) / 2) + 'px';
}
if ( user_id == my_user_id )
{
move_update(bloc_id, 0, 0);
}
exec_event(user_id, next_left_pos, next_top_pos, 1);
}
else
{
player[user_id].moving = false;
}
}
}
}
If you still don't get what i am asking for (which i appreciate!) is that i want to know how to scroll 2 things at the same time (the player div and the global_map div) Hi all, I was wondering if i could have some help - i am not very technical! I would like to add 2 things to an onSubmit that is on a form. However, I have been reading various things as to whether or not this is possible. The button on the form looks like it runs some sort of validation as it starts with onsubmit="validateFormData...... I am trying to set up a goal in analytics and need to add a pageview tracker to the onSubmit as well. Is this possible? Please help me |
|||||||