|
JavaScript - I Want To Have Multiple Expanding/collapsing Tables Side By Side- Can This Be Done?
http://www.codingforums.com/showthread.php?t=87742 I've been using the advice and code here to start incorporating expanding/collapsing tables into my work, but I'm hitting a little problem. I want to have multiple such tables side-by-side (each headed by a picture and populated by a lightbox, which isn't the issue), but Dreamweaver wants nothing to do with the idea. I don't really even know if it's possible, but if it is I'd like to know what sort of changes I might need to make to achieve it.
Similar TutorialsHi people, I need help as follows: On the server side I have a php generated session parameter. I need to pass it to javascript on the client side page. I saw on the web the following solution: <script language="JavaScript"> var mySessionVar="<%= Session["MySessionVar"] %>"; </script> I tried it but it did not work. I could not find any explanation of this syntax - will appreciate one. Any suggestions, maybe in another way? Thanks I am trying to create two lists where data can be entered. The code below puts them on top of each other in the form. I am simply trying to get them next to each other (i.e. side-by-side). I have attempted using <div> or <table>, but have failed so far. Any help would be greatly appreciated. BTW... the user is asked to input the number of data they will be entering (datacount) in the body of the document. I am a newbie with JavaScript, so any help would be GREATLY appreciated. Thank you! Code: function createXYForm() {
var numberOfData = document.forms[0].datacount.value;
var form = document.createElement("form"); // create a form
with(form) {
setAttribute("name", "theForm"); // give form a name
setAttribute("action", "./calculate.php"); // give form an action
setAttribute("method", "GET"); // give form a method
}
document.body.appendChild(form);
for (var i=1; i<=numberOfData; i++) {
var input = document.createElement("input"); // create an input element
with(input) {
setAttribute("name", "dataX[]"); // give input a name
setAttribute("type", "text"); // make it a text input
setAttribute("value", ""); // give input a value
}
form.appendChild(input); // append input to form
form.appendChild(document.createElement("br"));
}
form.appendChild(document.createElement("br"));
for (var j=1; j<=numberOfData; j++) {
var input = document.createElement("input"); // create an input element
with(input) {
setAttribute("name", "dataY[]"); // give input a name
setAttribute("type", "text"); // make it a text input
setAttribute("value", ""); // give input a value
}
form.appendChild(input); // append input to form
form.appendChild(document.createElement("br"));
}
form.appendChild(document.createElement("br"));
var input = document.createElement("input"); // create an input element
with(input) {
setAttribute("type", "submit"); // make it a submit button
setAttribute("value", "Submit"); // give input a value
}
form.appendChild(input); // append input to form
document.getElementsByTagName("body")[0].appendChild(form); // append form to body element
}
Hi, I am trying to do a FAQ section on a site. New to this stuff. What I would like to do is: 1.Question 2.Answer (Question and part of an answer are visible) 3. A button for expanding/collapsing. I am trying to do a button that changes on hover,and when text is expanded image changes, then on hover it changes again and if I press I collapse it to the original image). What I got so far is this: Code: <head>
<style type="text/css">
.divVisible {display:block;}
.divHidden {display:none;}
#test {background-color: red;}
</style>
<script language="javascript" type="text/javascript">
var divID = "MyDiv";
function CollapseExpand() {
var divObject = document.getElementById(divID);
var currentCssClass = divObject.className;
if (divObject.className == "divVisible")
divObject.className = "divHidden";
else
divObject.className = "divVisible";
}
function changeImage()
{
document.images["Button1"].src= "less.png";
return true;
}
function changeImageBack()
{
document.images["Button1"].src = "more.png";
return true;
}
</script>
</head>
<body>
<div id="test">
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div id="MyDiv" class="divHidden">
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
</div>
</div>
<A href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" input id="Button1" type="button" onClick="return CollapseExpand()" ><img
name="Button1" src="less.png" width="81" height="42" border="0"
alt="javascript button"></A>
</body>
</html>
I tried different stuff but couldn't connect 4 images. (more.png, morehover.png, less.png, lesshover.png). Thnx in advance G. Hi all, I'm using the scripts from Dynamic Drive http://www.dynamicdrive.com/dynamici...edcollapse.htm to create a sliding collapsing/expanding div. I need to modify it slightly so instead of an image for the toggle, it has text hyperlink - changing from "Show More" to "Show Fewer". Can anyone help? Thanks http://www.mainstudio.com/ Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically? Also, to include the functionality of having content inside each panel load only after its clicked. Hey, I'm having trouble with this site http://bit.ly/hL0u0w... If you go to the services section you will see a sub navigation on the left of the box. The idea of this is to have sub sections within the main headings that expand/collapse when selected. Insted when any one link is clicked the whole menu expands and not just the related sub sections. This is the javascript Quote: <script type="text/javascript"> $(document).ready (function() { $('#link1').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); $(document).ready (function() { $('#link2').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); $(document).ready (function() { $('#link3').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); }); </script> and here is the html Quote: <div id="subnav4"> <ul class="navigation4 pagination"> <li class="tab4"><a rel="1" id="link1" href="#">heading 1</a></li> <li style="display: none;" class="dome slide"><a href="#">corporate id</a></li> <li style="display: none;" class="dome slide"><a href="#">branding</a></li> <li style="display: none;" class="dome slide"><a href="#">brochures</a></li> <li style="display: none;" class="dome slide"><a href="#">direct mail</a></li> <li class="tab4"><a id="link2" href="#">heading 2</a></li> <li style="display: none;" class="dome slide"><a href="#">email marketing</a></li> <li style="display: none;" class="dome slide"><a href="#">websites</a></li> <li class="tab4"><a id="link3" href="#">heading 3</a></li> <li style="display: none;" class="dome slide"><a href="#">advertising</a></li> <li style="display: none;" class="dome slide"><a href="#">audiovisual</a></li> <li class="tab4"><a id="heading 3" href="#">exhibitions</a></li> </ul> </div> Hope someone can help with this! Many thanks! Hello everyone! I'm newly managing a small college website with next to no experience. There is a file called "bios.js" which creates expanding/collapsing li's. The problem is that I've put some hyperlinks into the expanded content, and it seems that "bios.js" is in front of, so clicking the hyperlink simply collapses the list item instead of opening the link. Is there any way to: a) have the hyperlinks trump the javascript? b) Make "bios.js" apply to the title class of the list item rather than the list item itself? I'm new to this, so I'm not going to post 100 lines of code before I know if it's doable. And if you reply to this, perhaps you could give me a hint as to what part of the code I should post (the open-hover portion?). Thanks all! Hello guys! :-) So, this is my first post so bare with me I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made. It has to be javascript, and as simple as possible :-) I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result. So: Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed? Ty in advance! :-) i am making a registration page for my website and for validation using javascript...is there any way to know on my client side javascript enable or not....
Hello, I have two problems. Firstly I am trying to make a form with client side validation but I have come across a problem. I need to validate the whole form under just one button but for validating email and phone number I have two different buttons and I am not sure how to make all the code run under just one button when it is submitted. The second problem is with validating the phone number. I am sure the code and javascript is fine, but for some reason it will not work. Here is my code: HTML 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="client_validation.js" />
</script>
<link rel="stylesheet" type="text/css" href="Client validation.css" />
<title> Client Validation </title>
</head>
<body>
<form name="contact_form" method="post" action="submit" onsubmit="return validate_form ( );">
<h3><strong>Client Validation</strong></h3>
<p>Your Name: <input type="text" name="text1"></p>
<p>Your Last Name: <input type="text" name="text2"></p>
<p>Email: <input type="text" id="email" name="text3"></p>
<p>Phone: <input type="text" name="text4"></p>
<p>Address: <textarea cols="20" rows="5" name="text5"></textarea></p>
<p>Do you agree to the Terms and Conditions?
<input type="checkbox" name="text6" value="Yes"> Yes
<p><input type="submit" name="send" value="Send Details"></p>
</form>
Your Email: <form id="form_id" method="post" action="action.php" onsubmit="javascript:return validate('form_id','email');">
<input type="text" id="email" name="email" />
<input type="submit" value="Submit" />
<form method="post" action="data.php" name="form1">
<p>Enter Number
<input type="text" name="phoneNo"></p>
<input type="button" name="btn1" value="submit" onClick="CheckNumber()">
</body>
</html>
JAVASCRIPT Code: function validate_form ( )
{
valid = true;
if ( document.contact_form.text1.value == "" )
{
alert ( "Please fill in the 'Your First Name' box." );
valid = false;
}
if ( document.contact_form.text2.value == "" )
{
alert ( "Please fill in the 'Your Last Name' box." );
valid = false;
}
if ( document.contact_form.text5.value == "" )
{
alert ( "Please fill in your address." );
valid = false;
}
if ( document.contact_form.text6.checked == false )
{
alert ( "Please check the Terms & Conditions box." );
valid = false;
}
return valid;
}
function validate(form_id,email) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[form_id].elements[email].value;
if(reg.test(address) == false) {
alert('Invalid Email Address');
return false;
}
}
function CheckNumber() {
var PhoneNumber=document.form1.phoneNo.value;
for (var i=0; i<PhoneNumber.length; i++) {
var c=PhoneNumber.charAt(i);
if (!(c>0 || c<9)){
alert("This is not a valid Phone Number");
break;
} } }
I hope you guys can help. Thank you I have been interested in APIs in the last time and i want to know exactly how it works from the server side. so i tried to figure out how the client side API working , first step i took the Google Plus One JS client side code and i tried to figure out how it works , mostly i tried to find how it gets connect to the server side. i couldn't find what this whole code doing , mainly because i focused to find Ajax requests , but there is none of them. this is the api I checked : https://apis.google.com/js/plusone.js now , my questions is simple , i want to know how API connect to the server side , do they use AJAX? what exactly they use to send request to server side ? i need you're help to know more on how api working on Client side , mainly on the connect to the server. so , how it get's done? I have a form field that needs to be validated in a hidden Iframe which is driven by Coldfusion. Which is working fine. But the same form field also need do some client side validation as well if Server side (iframe) validation passes. I thought I could create a javascript function, in it call a server side validate and then client side, but without any success. It does not process in the order as expected. Javascript always go first, then the server side validation. I tried to delay the client side with time delay, then server side did process first, but client function could not recognize the parameter passed. here is the function: Function doValidation(param1,param2,param3,param4) { .... document.iframName.src='serverValidate.cfm?m1=param1&p2=param2'; .... clientValidate(param3,param4); } If only I could have serverside validation return a value the function, then I could defined that value then the the clientValidate(param3,param5) to start other wise warn with a message. Both validation does work seperately. The issue is it triggered by one onChange event I have to put them in one function. Maybe I am on a wrong track. Please advise if anyone could have better solution. Thanks in advance. JT I got this accordion from this site: http://www.stemkoski.com/stupid-simp...ccordion-menu/ I'm trying to implement it into this site: http://tizifolio.com/officelogic/products/reception.php Why does it expand / flash for a second when the page loads on the products pages. Examples: http://tizifolio.com/officelogic/pro...occasional.php http://tizifolio.com/officelogic/products/reception.php This is the js: **************************************************************************************************** ********************/ $(document).ready(function() { //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) $('.accordionButton').click(function() { //REMOVE THE ON CLASS FROM ALL BUTTONS $('.accordionButton').removeClass('on'); //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES $('.accordionContent').slideUp('normal'); //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT if($(this).next().is(':hidden') == true) { //ADD THE ON CLASS TO THE BUTTON $(this).addClass('on'); //OPEN THE SLIDE $(this).next().slideDown('normal'); } }); /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER $('.accordionButton').mouseover(function() { $(this).addClass('over'); //ON MOUSEOUT REMOVE THE OVER CLASS }).mouseout(function() { $(this).removeClass('over'); }); /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ /**************************************************************************************************** **************** CLOSES ALL S ON PAGE LOAD **************************************************************************************************** ****************/ $('.accordionContent').hide(); }); Hi guys, I need your expertise regarding my dilema. I was able to create a simple google map html page at our web server, this web server has access to the internet. the problem is, when this page is accessed from a different PC that has no internet access, the google map won't work. I know that javascripts are run at the client side, so i'm asking is it possible to run everything at the server, including the javascripts and still output the google map? i used this tutorial to make my google map page : http://googlemaps.mayzes.org/ Hello again... I have written a custom slideshow script which gets the images from an array... The script will change the src of a img, which is a fullscreen background. Now here's the problem, I've been trying to write a function where can define a folder "gallery\test\", and then get all image files in that folder and repopulate the slideshow array. So, is there a way to scan folders? I've searched around and found some solutions where PHP is used, but i really want to keep this pure js, if possible (?) Thanks, I wish to change the dynamic text in a javascript to that which is in a MySQL database using PHP. this is then used in a flash scroller. currently i have hard coded the text in the javascript file. is there a way to have PHP run in the javascript file before it is sent to the endusers? or another way ? Hello, and thank you for taking the time to read over my thread. I'm pretty new with Javascript coding and have been working with an example script for a new membership registration form. The original form seemed to have worked for most intents and purposes but it only contained one entry for a password field. Naturally I felt it needed a conformation field and have tried to stick one in, which is where I ran into problems. I successfully made the script throw an alert box if the two forms are the same, but it then throws another alert box of undefined function as well as throwing the same undefined function alert box even if the fields are a match. Hopefully a knowledgeable person could take a quick look at this and kindly inform me of where I'm going wrong? The code contains two of my numerous attempts to make it work (one commented out, it was easier to remember different things I have tried before to leave then in but commented out, I'm sure you all are quite familiar with that idea). Anyhow, here's the code, thank you in advance. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
<style> .signup {border:1px solid #999999}</style>
<script>
function validate(form) {
fail = validateFirstname(form.firstname.value)
fail += validateSurname(form.surname.value)
fail += validateUsername(form.username.value)
fail += validatePassword(form.password.value)
fail += validateConfirmpass(form.confirmpass.value)
fail += validateAge(form.age.value)
fail += validateEmail(form.email.value)
if (fail == "") return true
else { alert(fail); return false }
}
</script>
<script>
function validateFirstname(field) {
if (field == "") return "No First name entered. \n"
return ""
}
function validateSurname(field) {
if (field == "") return "No Surname entered. \n"
return ""
}
function validateUsername(field) {
if (field == "") return "No Username was entered. \n"
else if (field.length < 5) return "Usernames must be at least 5 characters. \n"
else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only a-z, A-Z, 0-9, - and _ are valid in Usernames. \n"
}
function validatePassword(field) {
if (field == "") return "No Password was entered. \n"
else if (field.length < 6) return "Passwords must be at least 6 characters. \n"
else if (!/[a-z]/.test(field) || ! /[A-Z]/.test(field) || !/[0-9]/.test(field)) return "For your account security Passwords require atleast one uppercase, one lowercase, and one number to be valid. \n"
}
function validateConfirmpass() {
var p1 = document.getElementById('password').value;
var p2 = document.getElementById('confirmpass').value;
if (p1 !== p2) alert("The password fields do not match.");
}
//function validateConfirmpass(field) {
// var password = document.getElementById('password').value;
// var confirmpass = document.getElementById('confirmpass').value;
// if (password !== confirmpass) {
// return "The password and confirmation do not match. \n"
// }
//}
function validateAge(field) {
if (isNaN(field)) return "No Age was entered.\n"
else if (field < 18 || field >110) return "Age is required to be between 18 and 110 years. \n"
return ""
}
function validateEmail(field) {
if (field == "") return "No Email was entered. \n"
else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The Email address entered is invalid. \n"
return ""
}
</script>
</head>
<body>
<table class="signup" border="0" cellpadding="2" cellspacing="5">
<th colspan="2" align="center">Registration Form</th>
<form method="post" action="tnssignup.php" onsubmit="return validate(this)">
<tr><td>First name</td><td><input type="text" maxlength="32" name="firstname" /></td>
</tr><tr><td>Surname</td><td><input type="text" maxlength="32" name="surname" /></td>
</tr><tr><td>Username</td><td><input type="text" maxlength="16" name="username" /></td>
</tr><tr><td>Password</td><td><input type="text" maxlength="12" id="password" name="password" /></td>
</tr><tr><td>Confirm Password</td><td><input type="text" maxlength="12" id="confirmpass" name="confirmpass" /></td>
</tr><tr><td>Age</td><td><input type="text" maxlength="3" name="age" /></td>
</tr><tr><td>Email</td><td><input type="text" maxlength="64" name="email" /></td>
</tr><tr><td colspan="2" align="center"> <input type="submit" value="Register" /></td>
</tr></form></table>
</body>
</html>
Hello, I am trying to create some javascript that will create a popup and the popup itself is just an image. But since I want the image to take up the entire window i create the html in a variable to hold the image. For some reason I always get white space on the right. I already have css built into the html variable to take out padding and margins and I even specify the size(sized exactly to the image) when doing window.open. I have not been able to solve this in a couple of days and have been trying alot of different solutions with no work. Any help is appreciated, here is the code: Code: function get_radio_value()
{
var wrong = "<html><head><style type='text/css'>body {margin: 0; padding:0; border:0;}</style>\
<title>Incorrect, try again!</title></head><body><bgsound src='Plbt.wav'>\
<a href='javascript:window.close()'><img src='wrong.jpg'></a></body></html>";
var right = "<html><head><style type='text/css'>body {margin: 0}</style>\
<title>You are Correct!</title></head><body>\
<a href='javascript:window.close()'><img src='right.jpg'></a></body></html>";
for (var i=0; i < document.question.mquestion.length; i++)
{
if (document.question.mquestion[i].checked)
{
var rad_val = document.question.mquestion[i].value;
if (rad_val != "b")
{ var popup = window.open('','',"resizeable=no,scrollbars=no,location=no,menubar=no,toolbar=no,width=221,height=112");
popup.document.write(wrong);
pops.document.close();
}
else
{ var popup = window.open("","window","resizeable,scrollbars=no,width=221,height=112");
popup.document.write(right);
pops.document.close();
}
}
}
}
</script>
|
|||||||