|
JavaScript - Using Variable To Control Two Functions: Having Problems!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JS: Image Slider</title>
<script type="text/javascript">
var img = [];
img[img.length] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
img[img.length] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
img[img.length] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
img[img.length] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};
img[img.length] = {src: "http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg",
cap: "",
url: "",
des: ""
};
img[img.length] = {src: "http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg",
cap: "",
url: "",
des: ""
};
for (var imgs=[], i=0; i<img.length; i++){
imgs[i] = new Image();
imgs[i].src = img[i].src;
}
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn;
var curOpac = 10;
var ctrl;
var showTimer;
dirn = -1;
function autoImage(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
autoImage();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
showTimer = setTimeout(autoImage,1000);
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (++curPic > img.length-1) ? 0 : curPic;
imgSlider.src = img[curPic].src;
}
}
function shuffleImage(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
shuffleImage();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
showTimer = setTimeout(shuffleImage,1000);
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = Math.ceil(Math.random()*img.length)-1;
imgSlider.src = img[curPic].src;
}
}
window.onload = function(){
imgSlider = document.getElementById('imgSlides');
imgSlider.src = img[curPic].src;
}
auto = true;
function autoCtrl(){
if(!auto){
clearInterval(fadeTimer);
clearTimeout(showTimer);
auto = true;
}
else{
autoImage();
auto = false;
}
}
shuffle = true;
function shuffleCtrl(){
if(!shuffle){
clearInterval(fadeTimer);
clearTimeout(showTimer);
shuffle = true;
}
else{
shuffleImage();
shuffle = false;
}
}
</script>
</head>
<body>
<img id="imgSlides" src="" style="width: 500px; height: 500px;" alt="" />
<br />
<a href="javascript: autoCtrl()" title="Play / Pause">AUTO</a>
<a href="javascript: shuffleCtrl()">SHUFFLE</a>
</body>
</html>
My problem is that every other turn I have to click either button twice to start the desired function. Say, I autoplay the images first and I want to shuffle them, I click shuffle and the autoplay stops working and I need to click shuffle again and then the shuffle runs. How can I make it clicked once and the function runs? Similar TutorialsI was having some problems getting my function to only perform when I click the shoot button. Right now I have it where if you click the buttons and it plays the whole game. I was wondering if there is some way to maybe hide it and then just print the results only when I press the shoot button. I posted my game here its the front page. http://mmoloot4u.com/ I am trying to find out so things so far i thought about doing this, but im not sure the best way. Could i remove assignments from document.getElementByIf('whatever').value from the onclick code for rock, paper, and scissors. Instead define corresponding variables in your <script> area and assign to those variables. Then in 'shoot' you can assign those variables to the corresponding element values? Hi, Here's a sample form: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
function displayResult() {
alert(document.myForm.myInput.value);
}
function getFocus() {
if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
document.myForm.myInput.value = "";
}
}
function loseFocus() {
if (document.myForm.myInput.value == "") {
document.myForm.myInput.value = document.myForm.myInput.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
It works with no problem, but the following doesn't: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
var x = document.myForm.myInput;
function displayResult() {
alert(x.value);
}
function getFocus() {
if (x.value == x.defaultValue) {
x.value = "";
}
}
function loseFocus() {
if (x.value == "") {
x.value = x.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
What's wrong with it and how can I define a global variable to be used by all the functions? Many thanks in advance! Mike Is it possible to make a variable available to other functions outside a function So to make it global from within a function without using a callback Code: function() {
var something = 'hello';
}
function(something) {
document.write(something);
}
something like that possible?? Help will be greatly appreciated! Situation: I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END. condition of the frame, fixed width/height, no scroll, no border. Very new to javascript but need this code to make a page work for BIZ. Thank you in advance for anyone kind enough to point the right direction! Hi, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper()
{
function frequencyWrapperOne()
{
var numberArrayOne = new Array(0,0,0);
for (var i = 0; i < 1000; i = i + 1)
{
var chosenNumber = Math.floor(Math.random() * 3);
if (chosenNumber == 0)
{
numberArrayOne[0] = numberArrayOne[0] + 1;
}
if (chosenNumber == 1)
{
numberArrayOne[1] = numberArrayOne[1] + 1;
}
if (chosenNumber == 2)
{
numberArrayOne[2] = numberArrayOne[2] + 1;
}
}
return window.alert(numberArrayOne.join(','));
}
}
testWrapper();
Thanks. Is there a way to activate a function from another function? It has to be in the script tag, it can't be in the HTML section. Can I use something similar to this following code? If not, can anyone give me some help? I have tried to do it various ways, and have looked it up a few times, but to no avail. Can I use something similar to this following code? If not, can anyone give me some help? if (condition) {activate functionname();} Any help I can get would be appreciated. Thanks a lot to anyone who can help. Ok here is what I have so far, my ending part of my Call Function I think is ok. for my main function. I think I misplaced the { and } I will show you all the codes I have for my main function this is what I have I think I did misplace something but I can not pin point where that one small things should be Code: unction showResults(race,name,party,votes)
{ // script element to display the results of a particular race
var totalV = totalVotes(votes);
document.write("<h2>" + race + "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class ='num'>Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");
}
for (var i=0; i < name.length; i++)
{
document.write("<tr>");
document.write("<td>" name[i] + "(" + party[i] + ")</td>");
document.write("td class='num'>" + votes[i] + "</td>");
var percent=calcPercent(votes[i], totalV)
document.write("<td class='num'>(" + percent +"%)</td>");
createBar(party[i],percent)
document.write("</tr>");
}
document.write("</table>");
}
</script>
Just wondering if i misplaced any ; or { or } anywhere suggestions? Here is my call function Code: <script type="text/javascript"> showResults(race[0],name1,party1,votes1); showResults(race[1],name2,party2,votes2); showResults(race[2],name3,party3,votes3); showResults(race[3],name4,party4,votes4); showResults(race[4],name5,party5,votes5); </script> I been going over this, I can not seem to figure out what { i might be missing? Thanks Sup gents. Excuse my tenaciously novice questions, but dont disparage just yet, im beginning to grasp how the mechanism behind the code words, in due part to your helpful suggestions Im in the last stages of the code. In this section i have added three methods, whose function is to direct access control over the ciphers i will be adding shortly. I firstly need for the methods to be working. What they do is, categorize the set of values inside the first array and give a set of names privileges. The three methods that deal with the access control are link(), secondgroup() and third group. Ive assigned that the first three names( link() ) can access all the ciphers, ie administrators, the next three names ( secondgroup() ) can only access the shift, permutation and vigenere ciphers and the rest ( thirdgroup() ) can access the other remaining ciphers. But ive added so much code at once that i overwhelmed myself and i now i cant figure out where ive gone wrong, be it in the syntax or the logic Code: <html>
<head>
<script type ="text/JavaScript">
var counter = 0;
var counter2 = 0;
var arraynumb = 0;
var arraynumb2 = 0;
var global;
var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil'];
var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"];
function pass(){
var searchKey = document.searchform.inputVal.value;
for (var i = 0, len = array.length; i < len; i++){
if (array[i] == searchKey){
counter = 1;
arraynumb = i;
}
}
}
function pass1(){
var searchKey2 = document.searchform.inputVal2.value;
for (var i = 0, len = array2.length; i < len; i++){
if (array2[i] == searchKey2){
counter2 = 1;
arraynumb2 = i;
}
}
}
function access()
{
if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2)
{
window.alert("You may access the website");
global = 1;
}
else{
window.alert("You may not access the website");
global = 0;
}
}
function link()
{
var searchKey3 = document.searchform.inputVal.value;
if (global == 1 && (searchkey3 == array[0] || searchkey3 == array[1] || searchkey3 == array[2] ))
{
window.alert("You are an administrator, you may use all the ciphers");
}
else
window.alert("you are not signed in, please do so");
}
function secondgroup()
{
var searchKey4 = document.searchform.inputVal.value;
if (global == 1 && (searchkey4 == array[3] || searchkey4 == array[4] || searchkey4 == array[5] ))
{
window.alert("You are an ordinary user of class A, you may proceed to access the Shift, Vigenere and Permutation ciphers");
}
else
window.alert("You may not access this cipher");
}
fucntion thirdgroup()
{
var searchKey5 = document.searchform.inputVal.value;
if (global == 1 && (searchkey5 == array[6] || searchkey5 == array[7] || searchkey5 == array[8] || searchkey5 == array[9] ))
{
window.alert("You are an ordinary user of class B, you may proceed to access the Hill, Affine, Substitution and DES ciphers");
}
else
window.alert("You may not access this cipher");
}
</script>
</head>
<body>
<form name = "searchform" action = "">
<p>Enter username<br/>
<input name = "inputVal" type = "text" size = "30"/>
<input name = "search2" type = "button" value = "Search" onclick = "pass()"/>
</p>
<p>Enter password<br/>
<input name = "inputVal2" type = "password" size = "30"/>
<input name = "search" type = "button" value = "Search" onclick = "pass1()"/>
<input name = "Access site" type = "button" value = "Access" onclick = "access()"/>
<br/>
<br/>
<input name = "link to" type = "button" value = "Shift" onclick = "link();return secondgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Vigenere" onclick = "link();return secondgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Permutation" onclick = "link();return secondgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Hill" onclick = "link();return thirdgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Affine" onclick = "link();return thirdgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Substitution" onclick = "link();return thirdgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Des" onclick = "link();return thirdgroup();" enabled=""/>
<br/>
</p>
<br/>
<p></p>
</form>
</body>
</html>
I am trying to set up a form for paypal where the amount (cost) of the product is based on the currency chosen. I am trying to set this up using javascript which would submit the form and change the amount in the form. However, as a beginner, I am having some issues. This is what I have currently: Code: <html>
<head>
<script type="text/javascript">
function CalculateOrder(theform)
{
var currency = theform.currency_code.value;
if (currency == "GBP")
{
theform.amount.value = "1.29"
}
else if (currency == "USD")
{
theform.amount.value = "1.99"
}
else if (currency == "EUR")
{
theform.amount.value = "1.39"
}
document.payform.submit();
}
</script>
</head>
<body>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr " method="post" name="payform">
<input type="hidden" name="on0" value="Currency">
<select name="currency_code">
<option value="GBP" selected >GBP</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</p>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif " onClick="CalculateOrder(this.form)" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="myemail@gmail.com">
<input type="hidden" name="item_name" value="My Prouct">
<input type="hidden" name="amount" value="0.00">
<input type="hidden" name="shipping" value="0">
<input type="hidden" name="no_shipping" value="1">
</form>
</fieldset>
</body>
</html>
The javascript is executed but clicking the image submits the form before the javascript runs and I am worried that the javascript may not run before the form is submitted so the amount would not be calculated - please help! I do not want to calculate the costs based on the exchange rate. I would really prefer (and also find it simpler) to just specify the cost in each currency. Thanks in advance! Hey all, I have a script that limit characters and lines entered by users in a textarea.. i want instead of throwing that alert message to jump to the next line and the user can continue writing, here is the script: Code: <script type="text/javascript">
var alert_title='Input Restriction';
function limitTextarea(el,maxLines,maxChar){
if(!el.x)
{
el.x=uniqueInt();
el.onblur=function(){clearInterval(window['int'+el.x])}
}
window['int'+el.x]=setInterval(function(){
var lines=el.value.replace(/\r/g,'').split('\n'),
i=lines.length,
lines_removed,
char_removed;
if(maxLines&&i>maxLines){
alert('You can not enter\nmore than '+maxLines+' lines');
lines=lines.slice(0,maxLines);
lines_removed=1
}
if(maxChar){
i=lines.length;
while(i-->0)if(lines[i].length>maxChar){
lines[i]=lines[i].slice(0,maxChar);
char_removed=1
}
if(char_removed)
alert('You can not enter more\nthan '+maxChar+' characters per line')
}
if(char_removed||lines_removed)
el.value=lines.join('\n')
},50);
}
function uniqueInt(){
var num,maxNum=100000;
if(!uniqueInt.a||maxNum<=uniqueInt.a.length)uniqueInt.a=[];
do num=Math.ceil(Math.random()*maxNum);
while(uniqueInt.a.hasMember(num))
uniqueInt.a[uniqueInt.a.length]=num;
return num
}
Array.prototype.hasMember=function(testItem){
var i=this.length;
while(i-->0)if(testItem==this[i])return 1;
return 0
};
</script>
The HTML Code: <textarea onFocus="limitTextarea(this,5,40)" wrap="soft"></textarea> please help! Hello Friends... I am working on the healthcare project.So in that project there are different html pages for the user interaction & Events,such as user registration,patient profiles,doctor registration. So in the patient registration page i want to add the calendar control the requirement is whenever i click on the calendar control the user selected date is displayed in the textbox in the ddmmyyyy format.. So please tell me the answer... Thanking you..... Umesh All, I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well?? Thanks in advance. Hi. I'll would like to know how can I control a swf with a FLVPlayback, that it's reading a movie from my server, with Javascript. check the link. it's the second image http://www.luisporem.com/projects/pr...nto_glass.html does anyone knows how? thanks I've been trying to get a form to control iframes, but new to javascript I basically want to input the url from a form & display it in an iframe, but cant figure out how to link the url from the form to the iframe The code im using atm Code: <html>
<head>
<title> SearchLite v2 - search multiple sites at once</title>
<STYLE TYPE="text/css">
.txt
{
BACKGROUND-COLOR: lavender; BORDER-BOTTOM-COLOR: lavender; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-COLOR: lavender; BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-COLOR: lavender; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-COLOR: lavender; BORDER-TOP-WIDTH: 0px; HEIGHT: 22px; WIDTH: 599px;
}
.cellht
{
HEIGHT: 50px;
}
.cell
{
BACKGROUND-COLOR: lavender;
}
</STYLE>
<script>
function win()
{
frmlen = document.myform.elements.length;
idiv=1;
for (var icnt=0;icnt<frmlen;icnt++)
{
//loop thru all FORM elements and look for checkboxes which have been checked
if (document.myform.elements[icnt].type=="checkbox" && document.myform.elements[icnt].checked)
{
//make IFRAME visible
document.getElementById("f"+idiv).style.visibility = 'visible';
//make textbox that shows heading with name of site being searched, visible
document.getElementById("t"+idiv).style.visibility = 'visible';
//build the URL
strSite = document.myform.elements[icnt].value;
strSearch= escape(document.myform.mytext.value);
url = strSite + strSearch;
//set SRC property of IFRAME to dynamically built URL
document.getElementById("f"+idiv).src = url;
//show only the domain name part of the URL
dmn=url.substring(7);
document.getElementById("t"+idiv).value= dmn.substring(0,dmn.indexOf("/"));
idiv+=1;
}
}
}
function hide()
{
for (var icnt=1;icnt<13;icnt++)
{
//hide all IFRAME s
document.getElementById("f"+icnt).style.visibility = 'hidden';
//hide all the camouflaged textboxes that display the title
document.getElementById("t"+icnt).style.visibility = 'hidden';
}
}
</script>
</head>
//Form1 i want to use for the url ...........
<form> Enter URL1: <input type="text" name="Enter Url" /> </form>
//Form2 i want to use for the url ...........
<form> Enter URL2: <input type="text" name="Enter Url" /> </form>
<body onload="hide()">
<form method=post action="" name="myform">
<table border=0 align='center'>
<tr><td colspan=3 height='30%'><font size="5">SEARCH</font><i><font size="5" color="blue">LITE</font></i> v2 -search multiple sites at once and view results on a single page </td><td colspan=2> </td></tr>
<tr >
<td COLSPAN=3 ><input type="text" name="mytext" size="55"></td>
<td COLSPAN=3><input type="button" value="Find" onClick="win()"> <input type="reset" value="Reset" onclick="hide()"> <a href="mailto:dotnut@hotmail.com">Feedback</a></td>
</tr>
<tr > //Want to change the value= replaced by the value in the form
<td class="cell"><input type="checkbox" name="1" value="http://www.google.com/search?hl=en&btnG=Google+Search&q=">Google</td>
<td class="cell"><input type="checkbox" name="2" value="http://www.dictionary.com/search?q=">Dictionary</td>
<tr><td COLSPAN=5 HEIGHT='50' CLASS='cellht'><input type='text' id='t1' class='txt'></td></tr>
<tr><td COLSPAN=5><IFRAME id='f1' FRAMEBORDER=1 SCROLLING='yes' WIDTH=600 HEIGHT=360></IFRAME><br></td></tr>
<tr><td COLSPAN=5 CLASS='cellht'><input type='text' id='t2' class='txt' ></td></tr>
<tr><td COLSPAN=5><IFRAME id='f2' FRAMEBORDER=1 SCROLLING='yes' WIDTH=600 HEIGHT=360></IFRAME><br></td></tr>
</table>
</form>
</body>
</html>
thnx I have an ASP.Net page that uses functions in a .js file. I'm trying to reset the values in the controls on the form. The script I'm using works for Text boxes, TextArea boxes, and Check boxes, but, doesn't work for Select-One (DropDownList) or Select-Multi (List) controls. Included is the code. I use the alert() call as troubleshooting to insure the code segment is entered and the control is identified. The SelectIndex of the control is not being set. When this code is hard coded on the page it works. Code: function ClearAllControls() {
for (i = 0; i <= document.forms[0].length; i++) {
doc = document.forms[0].elements[i];
switch (doc.type) {
case 'text':doc.value = ''; break;
case 'textarea':doc.value = ''; break;
case 'checkbox':doc.checked = false; break;
case 'select-one':
doc.selectedindex = 0;
alert(doc.name + " - " + doc.type)
break;
default:break;}
}
}
Hello friends... i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page. In registration page to register the portal the birth date of user is required . so i have added the calendar control using javascript. I want that whenever user clicks on the calendar the birth date is displayed in the textfield. but it cannot displayed the birth date... So please tell me the sloution... following is the code for calendar control <p> <meta content="text/html;" http-equiv="Content-Type" /> <style type="text/css"> #calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; } #calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; } #calenderTableHead TR { background-color: #5FB404; } #calenderTableDays TR { background-color: #B40404; color: #E6E6E6; } .normalDay { border: 1px dotted black; cursor: pointer; } .hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; } .toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; } .choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; } </style> <link rel="stylesheet" type="text/css" href="calendar.css" /> <script language="javaScript" type="text/javascript" src="calendar.js"> // Array of max days in month in a year and in a leap year monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; hideSelectTags = []; function getRealYear(dateObj) { return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900); } function getDaysPerMonth(month, year) { /* Check for leap year. These are some conditions to check year is leap year or not... 1.Years evenly divisible by four are normally leap years, except for... 2.Years also evenly divisible by 100 are not leap years, except for... 3.Years also evenly divisible by 400 are leap years. */ if ((year % 4) == 0) { if ((year % 100) == 0 && (year % 400) != 0) return monthMaxDays[month]; return monthMaxDaysLeap[month]; } else return monthMaxDays[month]; } function createCalender(year, month, day) { // current Date var curDate = new Date(); var curDay = curDate.getDate(); var curMonth = curDate.getMonth(); var curYear = getRealYear(curDate) // if a date already exists, we calculate some values here if (!year) { var year = curYear; var month = curMonth; } var yearFound = 0; for (var i=0; i<document.getElementById('selectYear').options.length; i++) { if (document.getElementById('selectYear').options[i].value == year) { document.getElementById('selectYear').selectedIndex = i; yearFound = true; break; } } if (!yearFound) { document.getElementById('selectYear').selectedIndex = 0; year = document.getElementById('selectYear').options[0].value; } document.getElementById('selectMonth').selectedIndex = month; // first day of the month. var fristDayOfMonthObj = new Date(year, month, 1); var firstDayOfMonth = fristDayOfMonthObj.getDay(); continu = true; firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0; while (d <= getDaysPerMonth(month, year)) { if (firstRow) { trs[ti] = document.createElement("TR"); if (firstDayOfMonth > 0) { while (x < firstDayOfMonth) { trs[ti].appendChild(document.createElement("TD")); x++; } } firstRow = false; var d = 1; } if (x % 7 == 0) { ti++; trs[ti] = document.createElement("TR"); } if (day && d == day) { var setID = 'calenderChoosenDay'; var styleClass = 'choosenDay'; var setTitle = 'this day is currently selected'; } else if (d == curDay && month == curMonth && year == curYear) { var setID = 'calenderToDay'; var styleClass = 'toDay'; var setTitle = 'this day today'; } else { var setID = false; var styleClass = 'normalDay'; var setTitle = false; } var td = document.createElement("TD"); td.className = styleClass; if (setID) { td.id = setID; } if (setTitle) { td.title = setTitle; } td.onmouseover = new Function('highLiteDay(this)'); td.onmouseout = new Function('deHighLiteDay(this)'); if (targetEl) td.onclick = new Function('pickDate('+year+', '+month+', '+d+')'); else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d)); trs[ti].appendChild(td); x++; d++; } return trs; } function showCalender(elPos, tgtEl) { targetEl = false; if (document.getElementById(tgtEl)) { targetEl = document.getElementById(tgtEl); } else { if (document.forms[0].elements[tgtEl]) { targetEl = document.forms[0].elements[tgtEl]; } } var calTable = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(elPos, positions); calTable.style.left = positions[0]+'px'; calTable.style.top = positions[1]+'px'; calTable.style.display='block'; var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$'); var m = matchDate.exec(targetEl.value); if (m == null) { trs = createCalender(false, false, false); showCalenderBody(trs); } else { if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1); if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1; trs = createCalender(m[3], m[2], m[1]); showCalenderBody(trs); } hideSelect(document.body, 1); } function showCalenderBody(trs) { var calTBody = document.getElementById('calender'); while (calTBody.childNodes[0]) { calTBody.removeChild(calTBody.childNodes[0]); } for (var i in trs) { calTBody.appendChild(trs[i]); } } function setYears(sy, ey) { // current Date var curDate = new Date(); var curYear = getRealYear(curDate); if (sy) startYear = curYear; if (ey) endYear = curYear; document.getElementById('selectYear').options.length = 0; var j = 0; for (y=ey; y>=sy; y--) { document.getElementById('selectYear')[j++] = new Option(y, y); } } function hideSelect(el, superTotal) { if (superTotal >= 100) { return; } var totalChilds = el.childNodes.length; for (var c=0; c<totalChilds; c++) { var thisTag = el.childNodes[c]; if (thisTag.tagName == 'SELECT') { if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear') { var calenderEl = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(thisTag, positions); // nieuw var thisLeft = positions[0]; var thisRight = positions[0] + thisTag.offsetWidth; var thisTop = positions[1]; var thisBottom = positions[1] + thisTag.offsetHeight; var calLeft = calenderEl.offsetLeft; var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth; var calTop = calenderEl.offsetTop; var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight; if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) ) { hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none'; } } } else if(thisTag.childNodes.length > 0) { hideSelect(thisTag, (superTotal+1)); } } } function closeCalender() { for (var i=0; i<hideSelectTags.length; i++) { hideSelectTags[i].style.display = 'block'; } hideSelectTags.length = 0; document.getElementById('calenderTable').style.display='none'; } function highLiteDay(el) { el.className = 'hlDay'; } function deHighLiteDay(el) { if (el.id == 'calenderToDay') el.className = 'toDay'; else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay'; else el.className = 'normalDay'; } function pickDate(year, month, day) { month++; day = day < 10 ? '0'+day : day; month = month < 10 ? '0'+month : month; if (!targetEl) { alert('target for date is not set yet'); } else { targetEl.value= day+'-'+month+'-'+year; closeCalender(); } } function getParentOffset(el, positions) { positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions; } </script> <link rel="stylesheet" type="text/css" href="calendar.css" /></p> <form> <input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&groupId=10136&t=1294233035464" /></a> </form> <!-- Calender Script --> <table id="calenderTable"> <tbody id="calenderTableHead"> <tr> <td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));"> <option value="0" selected="selected">Jan</option> <option value="1">Feb</option> <option value="2">Mar</option> <option value="3">Apr</option> <option value="4">May</option> <option value="5">Jun</option> <option value="6">Jul</option> <option value="7">Aug</option> <option value="8">Sep</option> <option value="9">Oct</option> <option value="10">Nov</option> <option value="11">Dec</option> </select></td> <td colspan="2" align="center"><select id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td> <td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td> </tr> </tbody> <tbody id="calenderTableDays"> <tr> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td> </tr> </tbody> <tbody id="calender"> </tbody> </table> <!-- End Calender Script --> Thanking you... I have written JS , in which I used activex control which does not work on mozila , anyone has idea to to same thing without activex , here is code which just upload the textfile contains on html page . <html> <head> <script type="text/javascript" language="javascript"> function Read() { var Scr = new ActiveXObject("Scripting.FileSystemObject"); var CTF = Scr .OpenTextFile("J:\\Users\\Karimkhan\\Desktop\\2011-03-01.txt", 1, true); data = CTF .ReadAll(); document.write("<pre>" + data + "<pre>"); //alert(data); CTF .Close(); } </script> </head> <body onLoad="Read()"> </body> </html> I've got a style control for my website where the user can select text color and background color. Cookies then remember the selections. The problem I have is when you select a text color the background color is changed instead of the text color. After page refresh both the text and background colors are correct. The error console reports a few errors in each js script. The errors all say 'sel is undefined' on line 7. html: Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Style Control</title>
</head>
<body>
<p><b>Style Control</b></p>
<p>Text color: (Broke - Sets bg color insted, works after page refresh)</p>
<form onsubmit="return false;" action="">
<script type="text/javascript" language="JavaScript" src="text_color.js"></script>
<select name="color_select1" size="1" onchange="return setColor(this, global_name1)">
<option style="background-color: white;" value="white">white</option>
<option style="background-color: black; color: white;" value="black">black</option>
<option style="background-color: seagreen;" value="seagreen">seagreen</option>
<option style="background-color: springgreen;" value="springgreen">springgreen</option>
<option style="background-color: royalblue;" value="royalblue">royalblue</option>
<option style="background-color: skyblue;" value="skyblue">skyblue</option>
</select>
</form>
<br /><br />
<p>Background color:</p>
<form onsubmit="return false;" action="">
<script type="text/javascript" language="JavaScript" src="bg_color.js"></script>
<select name="color_select2" size="1" onchange="return setColor(this, global_name2)">
<option style="background-color: white;" value="white">white</option>
<option style="background-color: black; color: white;" value="black">black</option>
<option style="background-color: seagreen;" value="seagreen">seagreen</option>
<option style="background-color: springgreen;" value="springgreen">springgreen</option>
<option style="background-color: royalblue;" value="royalblue">royalblue</option>
<option style="background-color: skyblue;" value="skyblue">skyblue</option>
</select>
</form>
</body>
</html>
</body>
</html>
text_color.js : Code: var global_name1 = 'tcolor';
//
function getColor(sel, cookie_name) {
var cookie_value = getCookie(cookie_name);
if (!cookie_value) cookie_value = 'black';
document.body.style.color = cookie_value;
var opt = sel.options;
var x, len = sel.length;
for (x=0; x<len; x++) {
if (opt[x].value == cookie_value) {
opt[x].selected = true;
break;
}
}
return true;
}
getColor(document.forms[0].color_select1, global_name1);
//
function setColor(sel, cookie_name) {
var opt = sel.options[sel.selectedIndex].value;
var oneDay = 24 * 60 * 60 * 1000;
var oneYear = 365 * oneDay;
var expDate = new Date();
expDate.setTime(expDate.getTime() + oneYear);
setCookie(cookie_name, opt, expDate);
return getColor(sel, cookie_name);
}
// ---------------------------------------- //
function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
bg_color.js : Code: var global_name2 = 'bgcolor';
//
function getColor(sel, cookie_name) {
var cookie_value = getCookie(cookie_name);
if (!cookie_value) cookie_value = 'white';
document.body.style.backgroundColor = cookie_value;
var opt = sel.options;
var x, len = sel.length;
for (x=0; x<len; x++) {
if (opt[x].value == cookie_value) {
opt[x].selected = true;
break;
}
}
return true;
}
getColor(document.forms[0].color_select2, global_name2);
//
function setColor(sel, cookie_name) {
var opt = sel.options[sel.selectedIndex].value;
var oneDay = 24 * 60 * 60 * 1000;
var oneYear = 365 * oneDay;
var expDate = new Date();
expDate.setTime(expDate.getTime() + oneYear);
setCookie(cookie_name, opt, expDate);
return getColor(sel, cookie_name);
}
// ---------------------------------------- //
function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
Many thanks for any help. can anyone tell me how to use jquery with asp.net web user control? Thanks in Advance Regards Salman Ansari Hi, Ok i want to do the following... I am using blogger and I have thousands of posts and each post topic has a specific image assigned to it but every now and then I like to change the image that is being displayed but then I have to go through thousands of posts to change the image URL and this takes super long to complete. I thought of an idea of using Javascript to control this so I need your help please.. I want to be able to have a JS that I can insert the URL's of each image required for the posts and assign an ID like a number or a name to them, then have a seperate JS script that I can insert in ALL my posts and assign the same number to each related post relating to the image ID... So if I need to change images then all I need to do is change the URL in the Javascript and it affects all the posts that contain this image... hope this makes sense.. Please help Thank you. I have seen code like this but it only randomizes the images but is the same concept, perhaps someone can just alter this code for me please... [CODE] <head> <script language="JavaScript"> <!-- var theImages = new Array() theImages[0] = 'http://lh5.ggpht.com/_MAclvGBXzj4/TEtvnlxvvrI/AAAAAAAABQw/N7UVoBvtjxU/s320/video34.png' theImages[1] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEIZlr5FE6I/AAAAAAAABKU/LoBdw7Kqf3w/s200/Inside-blogger-256.png' theImages[2] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TCHDY788QaI/AAAAAAAAAAU/SnWr-NP0dqE/s200/news.png' theImages[3] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TEwgs_hhcXI/AAAAAAAABQ4/JTX1mzmdQLU/s200/croatia-flag.GIF' theImages[4] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEtzAvpIEQI/AAAAAAAABQ0/RiLAfiUsCiA/s320/warning23.png' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } //--> </script> </head> <body> <script language="JavaScript"> <!-- showImage(); </script> </body> [CODE] |
|||||||