|
JavaScript - Form That Opens Alternate Urls Based On Select Box Data
Hello
I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel Similar TutorialsHello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated. cursor: Quote: cursor bldglistc is select stvbldg_code, stvbldg_desc, slbbldg_street_line1, slbbldg_city, slbbldg_stat_code, slbbldg_zip from stvbldg, slbbldg where stvbldg_code = slbbldg_bldg_code (+) and stvbldg_desc not like 'DNU%' and stvbldg_desc not like 'Online%' order by slbbldg_bldg_code; bldg_record bldglistc%ROWTYPE; Javascript in package: Quote: htp.p(' <SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript"> function UpdateNextField(which1,which2,fld1,fld2) { document.getElementById(fld1).value = which1.value; document.getElementById(fld2).value = which2.value; } </SCRIPT> '); Form code from package: Quote: HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post'); twbkfrmt.P_FormHidden ('atyp', atyp); twbkfrmt.P_FormHidden ('seqno', seqno); twbkfrmt.p_tableopen ( 'DATAENTRY', cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."') ); twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5'); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'), idname => 'street_line1_input_id' ) ); twbkfrmt.p_tabledataopen (ccolspan => '5'); HTP.formselectopen ( 'str1', '', 1, cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"' ); OPEN bldglistc; LOOP FETCH bldglistc INTO bldg_record; IF bldglistc%NOTFOUND THEN EXIT; END IF; IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1 THEN twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1, 'selected' ); ELSE twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1 ); END IF; END LOOP; CLOSE bldglistc; HTP.formselectclose; twbkfrmt.p_tabledataclose; twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'), idname => 'street_line2_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'str2', 70, 75, address_rec.spraddr_street_line2, cattributes => 'ID="street_line2_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'), idname => 'zip_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'zip', NULL, 30, address_rec.spraddr_zip, cattributes => 'ID="zip_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tableclose; HTP.para; -- HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit')); HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset')); HTP.formclose; Hi, I want my page to jump to a different page based on data collected in the form input fields. I can jump to a new page alright, using the following javascript: 1. javascript code in form_a.html document.forms["form_A"].action = "page_x.html"l; document.forms["form_A"].submit(); 2. document.forms[0].action = "page_x.html"l; 3. window.locaton = "page_x.html"; 4. window.location.href = "page_x.html"; The problem is, I can see the new page was jumped to, but immediately it return back to the page that trigger the jump. Any idea? I need to finish the project before Christmas. Any help is greatly appreciated! Jeff For various reasons, I need the value of my drop down box options to contain size information rather than price. However I would like to be able to calculate a price for the items based on what size the user selects as well as the quantity. Below is the code I came up with (which doesn't work obviously) What can I do to get this to work for me? Thanks in advance for any help! Code: <head>
<script type="text/javascript">
<!--
function calc(A,B,SUM) {
var price = document.getElementById(A).extrainfo;
var quantity = document.getElementById(B).value;
document.getElementById(SUM).value = price * quantity;
}
//-->
</script>
</head>
<body>
<label>T-Shirt:
<select name="T_SHIRT" id="T_SHIRT" onchange="calc('T_SHIRT','Tshirt_QTY','total');">
<option selected="selected">CHOOSE A SIZE </option>
<option value="SIZE: SMALL" extrainfo="10.99">Small, 34/36 (S) </option>
<option value="SIZE: MEDIUM" extrainfo="11.99">Medium, 38/40 (M) </option>
<option value="SIZE LARGE" extrainfo="12.99">Large, 42/44 (L) </option>
</select>
</label>
<label>QTY:
<input type="text" id="Tshirt_QTY" name="Tshirt_QTY" onchange="calc('T_SHIRT','Tshirt_QTY','total')" />
</label>
<label>Price:
<input type="text" readonly="readonly" name="total" id="total"/>
</label>
</body>
Hey everyone. Been racking my brain all day trying to figure out how to duplicate this code with the limited javascript knowledge I have been trying to learn. This code is a Dropdown menu of Yes or No, than a Select button that Opens up a Text Input directly below the dropdown. So far, It works great. My problem is I need at least two of these on the same page and I do not know how to go about it. I have tried changing values to accommodate adding another on the same form, but than both stop working. Can someone Please HELP! Thank you in advance. Code: <html>
<head>
<SCRIPT language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</head>
<body>
<label>
<SELECT name="element">
<OPTION value="text" name="refer_yes" id="refer_yes">Yes</OPTION>
<OPTION value="text" name="refer_no" id="refer_no">No</OPTION>
</SELECT>
<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
</label>
<span id="fooBar"> </span>
</body>
<html>
I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help Code:
<script type="text/javascript">
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>
Code: <SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)"> <OPTION VALUE="1m">Monthly</OPTION> <OPTION VALUE="">One Time</OPTION> </SELECT> Code: <input type="text" id="name" name="name" value="Partnership" /> <input type="text" id="category" name="category" value="Partnership" /> Ok so let's say I have this dropdown with a list of these items: PALCO TRIBUNA ORO And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how? Thanks for any help in the subject. I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks. The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks! 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" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
function checkTextArea(fromto){
var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;
if (destination=="1") {
var limit = "500";
}
else {
var limit = "1000";
}
if (document.getElementById(id)){
var txt = document.getElementById(id).value;
if (txt.length>limit){
document.getElementById(id).value = txt.substr(0,limit);
}
len = document.getElementById(id).value.length;
span_id = "span" + id;
if (document.getElementById(span_id)){
document.getElementById(span_id).innerHTML = (limit-len);
} // if
} //if
} //function
function chardisplay(fromto) {
var deststring = "dest";
var identifier = deststring + fromto;
// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
// also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);
var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;
if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}
else {
document.getElementById(spanidentifier).innerHTML = "1000";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="myurl">
<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>
<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>
<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>
Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load. Code: <select name="Event_Type_ID">
<option value="1">Choice A</option>
<option value="2">Choice B</option>
<option value="3">Choice C</option>
</select>
<div id="showme">
Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden.
</div>
Can anyone lead me in the right direction? Thanks! Hi, I'm trying to build up a multi-select filter with checkboxes. I found few good scripts but I've got a problem to adapt them.. The script below can filter results based on criteria (that you can select via checkboxes). The results displayed are checked or unchecked boxes. What I want is : display results with div (for ex:<div>result1</div>) and not checkbox. How can I do that? Code: <script type="text/javascript" src="js/jquery.js.css"></script>
<script type="text/javascript">
$(function() {
$('#search input:checkbox').click(function() {
var classes = $('#search input:checkbox:checked').
map(function() { return $(this).val(); }).get().join('.');
classes = (classes ? '.' : '') + classes;
$('#results input:checkbox').attr('checked', false).
filter(classes).attr('checked', true);
});
});
</script>
</head>
<body>
<div id="search">
<fieldset>
<label><input type="checkbox" value="animal"> Animal</label>
<label><input type="checkbox" value="vegetable"> Vegetable</label>
</fieldset>
<fieldset>
<label><input type="checkbox" value="small"> Small</label>
<label><input type="checkbox" value="large"> Large</label>
</fieldset>
</div>
<div id="results">
<p><input type="checkbox" class="small animal"> Cat</p>
<p><input type="checkbox" class="medium animal"> Tiger</p>
<p><input type="checkbox" class="large animal"> Elephant</p>
<p><input type="checkbox" class="small vegetable"> Pea</p>
<p><input type="checkbox" class="large vegetable"> Pumpkin</p>
</div>
</ul>
</body>
</html>
Thanks for your help Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Dear all, background information: I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values): echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>"; When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly. The javascript looks like this function set_time_hour(hour_value,next_field){ alert (hour_value); alert (next_field); document.getElementById(next_field).value = hour_value; } The alert calls are giving me the right values. but the document.getElementById(next_field).value = hour_value; is not working. What is wrong there? Do you have an idea? How can I change the value of a select box with Javascript? The select box values are already popoluated with PHP so I just want to select the right value. Hi Guys, Im in need of some help with regards to forms. I am looking to build as basic as possible, a form that has 3 select dropdowns that have predetermined options. The user will select the first option and based on that option the second will populate and based on that, the third one will give the last option. Now, when the last one is selected, i need a div or a paragraph displaying information to be displayed. So here's the framework. Option 1 = fruit or vegitables of which fruit is selected is selected by the user Option 2 = Apples, Grapes, and pears of which apples is then selected Option 3 = Red, Green and Yellow of which Green is selected. Once green is selected, I need a description about the green aple to be displayed. Can anyone help me out on this? I am not sure where to begin and my boss is adament it must be done like yesterday. Ay help will be appreciated. Thanks. Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form? Thanks I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript">
<!--
function build() {
document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;
//print example: http://www.widget.com/content/ELM-VOC
return true;
}
-->
</script>
<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">
<input type="hidden" name="redirect" value="">
<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">
<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>
<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>
<!--truncated code -->
I have a page with categories of images. When clicked, each image on the left opens a div with it's own gallery of thumbnails. http://myspringslandscaping.com/portfolio.html Right now, to close a div, the category image has to be clicked a second time. How can I set it so that when one div opens, the other closes automatically? The client wants only one category displayed at a time. Any help would be appreciated. Thanks! Marita I can't seem to figure out what I am doing wrong. When you click the photo the script opens and then closes and never shows the slide show. Test site : http://www.royalraves.com/test/html/pets.html Blackbox.css Code: #lightbox{
position: absolute;
top: 0px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #f7f6f1;
width: 250px;
height: 250px;
margin: 0 auto;
border: 1px #CCC solid;
border-bottom:0px;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
z-index: 0;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink2, #nextLink2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000;
font-weight:bold;
cursor:pointer;
}
#imageDataContainer{
font: 14px Arial, Helvetica, sans-serif;
background-color: #f7f6f1;
height: 35px;
border:1px #ccc solid;
border-top:0px;
margin:auto;
}
#imageData{
padding:0px 10px 10px 10px;
}
#imageData #imageDetails{ width: 50%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; font-size:11px; color:#666; max-height:20px; }
#imageData #numberDisplay{ display: block; clear: left; font-weight: normal; font-size:14px; color:#333; padding-bottom: 5px; }
#imageData #slideshowLink{ width: 55px; float: right; padding:5px 0px 0 0px;}
#imageData #bottomNavClose{ width: 55px; float: right; padding:5px 0px 0 0px; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
In Head: Code: <!--- JS Code for album ---> <link rel="stylesheet" href="backbox.css" type="text/css" /> <script type="text/javascript" src="js/prototype.compressed.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/dhtmlHistory.js"></script> <script type="text/javascript" src="js/customsignsheader.js"></script> Code: For the album:
<!--- Album Code for Pets --->
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Benjamin">
<img src="images/pets/7.jpg" alt="Benjamin" width="250" height="180" border="0" /></a>
</div>
<a href="images/pets/1.jpg" rel="lightbox[slide]" caption="Benjamin"></a>
<a href="images/pets/2.jpg" rel="lightbox[slide]" caption="Cat TV"></a>
<a href="images/pets/3.jpg" rel="lightbox[slide]" caption="Hamie"></a>
<a href="images/pets/4.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
<a href="images/pets/5.jpg" rel="lightbox[slide]" caption="Kita"></a>
<a href="images/pets/6.jpg" rel="lightbox[slide]" caption="Paws to you"></a>
<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
<a href="images/pets/8.jpg" rel="lightbox[slide]" caption="Yard Work"></a>
<a href="images/pets/9.jpg" rel="lightbox[slide]" caption="Yes"></a>
<a href="images/pets/10.jpg" rel="lightbox[slide]" caption="Best of Buds"></a>
</center>
</div>
<!--- End of Album Code--->
|
|||||||