|
JavaScript - Dropdown (return Current Value)
Hi, i need some help with this if is possible.
I make this dropdown: Code: <dl class="dropdown"> <dt><a><span>Select a Field</span></a></dt> <dd> <ul id="menu-tags-menu" class="menu"> <li id="menu-item-159" class="menu-item current-menu-item"><a href="http://myweb.com.ar/portfolio/">All Fields</a></li> <li id="menu-item-54" class="menu-item"><a href="http://myweb.com.ar/tag/branding/">Branding</a></li> <li id="menu-item-55" class="menu-item"><a href="http://myweb.com.ar/tag/print-design/">Print Design</a></li> <li id="menu-item-57" class="menu-item"><a href="http://myweb.com.ar/tag/web-design/">Web Design</a></li> <li id="menu-item-56" class="menu-item"><a href="http://myweb.com.ar/tag/ui-design/">UI Design</a></li> <li id="menu-item-52" class="menu-item"><a href="http://myweb.com.ar/tag/motion-graphics/">Motion Graphics</a></li> <li id="menu-item-53" class="menu-item"><a href="http://myweb.com.ar/tag/illustration/">Illustration</a></li> </ul> </dd> </dl> Working with jquery and this code: Code: $(document).ready(function() {
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});
This works very well.. but i need the dt a span show me the value of the current li (<li class="current-menu-item">), so instead "Select a Field" must say "All Fields" (current value in this example), and when i go to "Motion Graphics" (for example), when page is load must say "Motion Graphics". Can i do this adding a variable to take the value of current li and droping when document.ready? Thanks Similar TutorialsHi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin Hello, I have this reservation form found on the main page of: http://www.avis.com.lb/ As you can see the current month "August" is selected as the default month and so is the year and day (the day is programmed to jump 2 days ahead for the renting of the car...) However if you look closely (check the screenshot attached) you'll see that the month "August" is repeated twice and so is the year "2009", the current month is repeated twice. What I wanna do is remove the duplication and just auto select the current month without duplicating it. I found this code: http://www.experts-exchange.com/Prog..._24229186.html But it doesn't seem to work with my form, I donno why. Here is the code of the script both javascript and a little bit of php PHP Code: $date = strtotime("+2 day"); $date2 = date('j',$date); $date4 = strtotime("+5 day"); $date3 = date('j',$date4); if($date3 == 1){ $nextmonth = strtotime("+1 day"); $monthid = date('m',$nextmonth); }else{ $nextmonth = strtotime("+0 day"); $monthid = date('m',$nextmonth); } if ($monthid==1){ $year = date("Y") + 1; }else{ $year = date("Y"); } //$pupday = date("j") - 12; //$pupday = date("d") + 2; //echo $pupday; //$returnday = date("d") +5; $month = date("F"); Code: var xMonths = new Array( '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' );
function getListValue( option_object ){return option_object[ option_object.selectedIndex ].value;}
function setListValue( option_object, value ){ option_object.selectedIndex = value;}
function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}
function init()
{
xToday = new Date();
yToday = addDays(new Date(),3);
xMonth = xToday.getMonth();
xDay = xToday.getDate()-1;
xYear = xToday.getYear()-2005; if (xYear < 2005) xYear=0;
yMonth = yToday.getMonth();
yDay = yToday.getDate()-1;
yYear = yToday.getYear()-2005; if (yYear < 2005) yYear=0;
xF = document.forms['quickbooking'];
setListValue( xF.ETAHour, 9 )
setListValue( xF.ETAMonth, xMonth )
setListValue( xF.ETADay, xDay )
setListValue( xF.ETAYear, xYear )
setListValue( xF.ETTHour, 9 )
setListValue( xF.ETTMonth, yMonth )
setListValue( xF.ETTDay, yDay )
setListValue( xF.ETTYear, yYear )
}
Code: <select class="formField" name="ETAMonth">
<option value="<? echo $monthid; ?>" selected="selected"><? echo $month; ?></option>
<option
value="01">January</option>
<option
value="02">February</option>
<option value="03">March</option>
<option
value="04">April</option>
<option value="05">May</option>
<option
value="06">June</option>
<option value="07">July</option>
<option
value="08">August</option>
<option value="09">September</option>
<option
value="10">October</option>
<option value="11">November</option>
<option
value="12">December</option>
</select>
<select
class="formField" name="ETAYear">
<option value="<? echo $year; ?>" selected="selected"><? echo $year; ?></option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
Help is very appreciated, thanks. So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? I don't understand the logic of Break, Return False, Return True. It was never really covered in our college class, and I see everyone using it. I got an A in the class, if that 'proves' that I really tried to apply myself. NOTE: I understand what the function is doing. I just don't understand WHEN to use break, return false or return true if the the translator can determine the conditional statements. PHP Code: function submitForm(){ var ageSelected = false; for (var i=0; i<5; ++1){ if (document.forms[0].ageGroup[i].checked == true) { ageSelected = true; break; } } if (ageSelected == false){ window.alert("You must select your age group"); return false; } else return false; } if the the translator can determine the conditional statements, why not write it like this: PHP Code: function submitForm(){ var ageSelected = false; for (var i=0; i<5; ++1){ if (document.forms[0].ageGroup[i].checked == true) { ageSelected = true; break; // what's the point for the 'break'? Won't the rest of the code be ignored since it passed the first condition? } } if (ageSelected == false){ window.alert("You must select your age group"); return false; } // why not leave the last else out? is it just a 'safety' catch, in case something other than true or false is inputted? else return false; // what's the point? } Questions: Why use return true, if the translator knows it's ture? Why use "return false" if the translator knows it's false and the alert window has already gone up? why not use "break" to stop the code? Why use the "return false" at the end "else" statement? Hi room, Hey, I opened up the source code for this page in google chrome and since i'm learning javascript, i wanted see if i could "read" it and figure out what was going on. I'm am having the hardest time understanding "return false" and "return true". Could someone step me through this via interpreting this code (in bold typeface): Code: var DefaultValue = 'Search';
function clearSearch() {
if (document.searchForm.q.value == DefaultValue) {
document.searchForm.q.value = '';
}
}
function validateSearchHeader() {
if ( document.searchForm.q.value == '' || document.searchForm.q.value.toLocaleLowerCase() == DefaultValue.toLocaleLowerCase() ) {
alert('Please enter at least one keyword in the Search box.');
document.searchForm.q.focus();
return false;
}
return true;
}
Thanks! hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe Hi Guys, Hope you can help. How do you simply output the current url in the browser i.e if i am in google.com I want google.com outputted and so on. Also on multilanguage sites if my url is say www.mydomain.com/en/about.html or http://www.mydomain.com/en/animals/h...stallions.html I want to be able to manipulate the url so I can change en to fr for example when I jump between english and french pages. I want users to be able to switch the language of that particular page by clicking a link. I need to be able to switch segment one of the url (en,fr,de etc...)dynamically somehow instead of hardcoding a link into each page. Any ideas? THANKS Hey, I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions? For non-IE browsers, here is the code I am using Code: div_opac = document.getElementById(some_div).style.opacity; Thanks for the help! Presently am using below code, and it is showing an error message says "Cannot call method "getCurrentWindow" of undefined (<Unknown source>#4) in <Unknown source> at line number 4" ========================================= function insertDataIntoHtmlEditorIE() { currentwindow = this.browserbot.getCurrentWindow(this); var iFrame = currentwindow.getElementById ('ctl00_MainContent_editor_ctl02_ctl00'); var iFrameBody; iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; iFrameBody.innerHTML = "xyz"; } ================================================ please help me out to resolve this issue.. *am calling this script in Selenium RC through Eclipse Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php I would like to display the current page the user is on somewhere on the page. Example: You are currently viewing index.php How would I be able to accomplish this? I am developing extension which should upload currently displayed html as a file to a remote web server, unfortunatelly so far i haven't suceeded. I think this should be done through XMLHttpRequest(), but neither I know how to upload files through XMLHttpRequest nor how to convert string to file. The HTML form that uploads a file: <form method="POST" action="https://woodmin.catsone.com /api/add_candidate" enctype="multipart/form-data"> <input name="resume" type="file"> </form> But as I said i need my plugin to do it automatically and file must be made from html code. Maybe you have some ideas, advices or good links which can help to solve my problem? This is a real headache for me! Thank you in advance. When I use the following script in my web page I do not get a print out. Can anyone tell me what is wrong? <!-- Begin // Get today's current date. var now = new Date(); // Array list of days. var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Array list of months. var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December'); // Calculate the number of the current day in the week. var date = ((now.getDate()<10) ? "0" : "")+ now.getDate(); // Calculate four digit year. function fourdigits(number) { return (number < 1000) ? number + 1900 : number; } // Join it all together today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear())) ; // Print out the data. document.write(today); // End --> I need to get an add on JS for this form to go with the current JS that is on it I need the add on JS to Validate all the fields have been filled out and then pop up an error if any of the fields are not filled out <FORM NAME="gather"><form onclick="return check(this);"> <fieldset> </p> <table width="200" border="0" cellpadding="10"> <tr> <th scope="row"><p align="left" class="style1">First Name*</p> <p> <div align="left"><input type="text" name="data_NameFirstName2" id="data_NameFirstName2" value="[Fname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Last Name*</p> <p> <div align="left"><input type="text" name="data_NameLastName2" id="data_NameLastName2" value="[Lname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Phone*</p> <p> <div align="left"><input type="text" name="phone1" id="phone1" /> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Email*</p> <p> <div align="left"><input type="text" name="email" id="email" /> </p></th> </tr> </table> </p> <p> <p><span class="style5">Please confirm your contact information.</span> <p><span class="style5"> (* = required) </span> <br /> <br /> <span class="style1"> <input type = "radio" name = "rad1" value = "Contact me"> <strong> Please contact me</strong></span></p> <p> <span class="style1">Please have my personal advisor</span></p> <p class="style1">contact me as soon as possible. <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Send me more info"> <strong>Send me more info</strong> </span></p> <p class="style1">I'm not ready to enroll yet, but</p> <p class="style1">please continue to send me more</p> <p class="style1">information and updates about </p> <p class="style1">going back to school <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Remove me from your mailing list"> <strong> No thanks </strong></span></p> <p class="style1"> Please remove me from your </p> <p class="style1">mailing list. <br /> <br /> </p> <label> <input type = "button" value = "submit" onclick ="chkrads()"> </label> </fieldset> </form> <script type = "text/javascript"> function chkrads() { var chosen = "None"; var which = -1; var len = document.gather.rad1.length; for (i = 0; i < len; i++) { if (document.gather.rad1[i].checked) { chosen = document.gather.rad1[i].value; which = i; } } if (chosen == "None") { alert("No Location Chosen"); } else { } if (which == 0) {window.location = "http://www.hudsonsd.com/national2010/thankcontact.html"} if (which == 1) {window.location = "http://www.hudsonsd.com/national2010/thanksend.html"} if (which == 2) {window.location = "http://www.hudsonsd.com/national2010/thanknocontact.html"} } </script> Thanks! Hey, i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out: Code: wysiwyg.getPath = function(i) {
if(wysiwyg.getMode(i) == 'source') return;
curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document;
sel = curr.selection;
if(sel == undefined) return;
if (sel.type=="Control") {
// control selection
range = sel.createRange();
if (range.length==1) {
elem = range.item(0);
}
else {
// multiple control selection
return;
}
} else {
range = sel.createRange();
elem = range.parentElement();
}
p = elem.tagName;
while(elem == elem.parentNode && elem.tagName != 'BODY'){
p = elem + ' > ' + p;
}
document.getElementById('wysiwg_path_' + i).innerHTML = p;
}
unfortunaly sel is always undefined, how can i fix it? i hope you can help me Morri Hi guys. I'm trying to make a small bit of scripting that will show the current time, updating once every second. What I need is the following: 1. Multiple timezones or GMT offsets (just put me on the right path, I can code them in, 2. Daylight savings time taken into consideration (only for Australia), adding the 1 hour during the times it is needed, 3. Text to show "Open" and "Closed" during different times (open during 8am to 5pm and closed if not 8am to 5pm.) I have the following code as a start, but I am completely stuck with how to get the rest of what I need! Any help would be appreciated. <h4>Victoria <script type="text/javascript"> <!-- var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } document.write(hours + ":" + minutes + " ") if(hours > 11){ document.write("PM") } else { document.write("AM") } //--> </script> <script type="text/javascript"> <!-- var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } if(hours > 11){ document.write("True") } else { document.write("False") } //--> </script> </h4> Cheers in advance. Dale. So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction. I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons. I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value. Code: <script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];
var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the first seventh of text.",
];
var currentMain = 0;
var currentMainT = 0;
function Prev()
{
return ShowMain(currentMain-1);
return ShowMainT(currentMainT-1);
}
function Next()
{
return ShowMain(currentMain+1);
return ShowMainT(currentMainT+1);
}
function ShowMain(which)
{
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
document.getElementById("mainText").style.display = 'inline'
document.getElementById("gallery").style.color="#ff0000";
return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="../Assets/Images/pt_entry+hall2.jpg"
images[1]="../Assets/Images/pt_stair+hall.jpg"
images[2]="../Assets/Images_Revised/40_kitchen.jpg"
images[3]="../Assets/Images_Revised/40_stair.jpg"
images[4]="../Assets/Images_Revised/C_front2.jpg"
images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
images[7]="../Assets/Images_Revised/C_side.jpg"
images[8]="../Assets/Images_Revised/Y_combo.jpg"
images[9]="../Assets/Images_Revised/Y_window.jpg"
images[10]="../Assets/Images_Revised/V_stair.jpgg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
Code: <div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
</td>
<td id="cell5 images"> </td>
</tr>
<tr>
<td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a></div>
Hello, I am a newbie to this forum. I have searched for the problem that I have in this forum but found none. I am creating a calendar using html/css and javascript. I used one the free javascript for calendar on the internet and modified it to the way I wanted it to be. However, I could not write the if statement so that the calendar will highlight the current date of the current month only, not all 12 months. And I could not write the if statement so that the calendar will know what day is a holiday and make it red color. Here is my code: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Calendar</title>
<style type="text/css">
#left {position:absolute;left:40px;top:10px;}
#right {position:absolute;left:400px;top:10px;}
.table1 {border-collapse:collapse;background-color:#efefef;}
.th2 {height:10px;background-color:#eeeee0;color:#951159;font-size:10px;}
.sunday {background-color:#DD2211;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.day {background-color:navy;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.date0 {border:1px solid #cccccc;font-size:10px;color:red;font-weight:bold;text-align:center;} /* This is the color for Sundays and Holidays */
.date1 {border:1px solid #cccccc;font-size:10px;height:10px;font-weight:bold;text-align:center;} /* This is the color for regular days */
.today {border:1px solid #cccccc;font-size:10px; color:#0000ff;background-color:#daffee;} /* This is the color for current day */
</style>
</head>
<body bgcolor=#cccccc>
<div id="left">
<script>
var i=0;
for (i=0;i<=5;i++)
{
function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}
function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December
// return number of days in the specified month (parameter)
return ar[month]
}
function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE", "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")
// return name of specified month (parameter)
return ar[month]
}
setCal()
function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)
// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
// number of days in current month
var days = getDays(month, year)
// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' ' + year
text += '</TH>' // close header cell
// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")
// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
if (dayNum == 0) {
text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
} else {
text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
}
}
text += '</TR>'
// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (col ==1) { // This is to make the text color red if it is Sunday
text += '<TD class="date0">' + digit + '</TD>'
} else
/* if ((month ==1) && (col ==2) && (row==3)) { // This is to make the text color red if it is a holiday
text += '<TD class="date0">' + digit + '</TD>'
} else */
/* if (digit == date) { // current cell represent today's date
text += '<TD class="today">'
text += digit
text += '</TD>'
} else */
text += '<TD class="date1">' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'
// print accumulative HTML string
document.write(text)
}
}
</script>
</div>
<!-- #################################################################### -->
<div id="right">
<script>
var i=0;
for (i=0;i<=5;i++)
{
function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}
function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December
// return number of days in the specified month (parameter)
return ar[month]
}
function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")
// return name of specified month (parameter)
return ar[month]
}
setCal()
function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)
// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
// number of days in current month
var days = getDays(month, year)
// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' ' + year
text += '</TH>' // close header cell
// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")
// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
if (dayNum == 0) {
text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
} else {
text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
}
}
text += '</TR>'
// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (col ==1) { // This is to make the text color red if it is Sunday
text += '<TD class="date0">' + digit + '</TD>'
} else
/* if ((month ==1) && (col ==2) && (row==3)) { // This is to make the text color red if it is a holiday
text += '<TD class="date0">' + digit + '</TD>'
} else */
/* if (digit == date) { // current cell represent today's date
text += '<TD class="today">'
text += digit
text += '</TD>'
} else */
text += '<TD class="date1">' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'
// print accumulative HTML string
document.write(text)
}
}
</script>
</div>
</body>
</html>
This is just for my practice in html/css and javascript. Thanks for all your time and support. kvkt |
|||||||