|
JavaScript - Ideas: Expanding <tr> To Reveal A <form>
Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with.
Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it. The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK. The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible. I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction". I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish") Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function? Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL? I think option 1 sounds better..... Again, I need help on making this form pop up on each table row. Any help or direction would be greatly appreciated. Sample code follows: Code: <table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Email</th>
<th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
<td onclick="javascriptfunction(this)">foo</td>
<td>bar</td>
<td>data</td>
<td>from</td>
<td>MySQL</td>
<td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
<table title="myTable" style="margin: auto; display:hidden">
<tr class ="theader2"><th colspan="2">TEST TABLE</th>
</tr>
<tr>
<td class="header">Some Field: </td>
<td class="selector"><select name="foo" style="width: 150px;" id="foo">
<option value="" selected="selected">-- Select Value --</option>
<tr>
<input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>
Any help would be greatly appreciated =) Similar TutorialsHi I have the following code. What I want to do is for certain questions to remain hidden inless certain conditions are met, then they appear to be answered. I am thinking with the <div> but not sure how. I also thought maybe with css but cant write a if statement in css so that a no go. Please help. Code: <tr><td align="left">Do you own a Yorkie?<br /> <input type="radio" name="owner" value="yes" /> Yes <input type="radio" name="owner" value="no" checked="checked" /> No<br /> <!-- If answer is no above the below questions are hidden, if yes then they appear -->> <div id="breeders"> How many? <select name="qnty" size="1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5+</option></select> Are you a breeder? <input type="radio" name="breeder" value="yes" checked="checked" /> Yes <input type="radio" name="breeder" value="no" /> No</div></td></tr> JavaScript Code: I am using a onload within the form opening tag Code: function showDiv() {
if(document.forms[2].owner.value == "yes") {
document.getElementById('breeders').style.visibility = 'visible';
}
else
document.getElementById('breeders').style.visibility = 'hidden';
}
I am not sure how to word this but I want an effect similar to this:
http://www.sean.co.uk/a/webdesign/ja...disappear.shtm
http://www.dynamicdrive.com/dynamici...tchcontent.htm
Only is it possible to have multiple links in a list and have the content (when you click on the link to make the hidden content appear) appear below all the links--instead of right below the link that was clicked on? Because I noticed that the hidden content appears right below the link. It said on the first website that you could "Use CSS to change the position of the material to be displayed or hidden. You could use that to overlay instructions on the whole screen in a pop-up window, for example." Is that the same thing as what I am wanting to do? So how would I go about doing that? Anything similar to that would be great. i am new at all of this so sorry for any confusion. Also thanks in advance.. Does anyone have any ideas for what i should work on next. I've made a music player where you can select the song you want. I've made a calculator. I'm relatively new to javascript so.
A quick background into what Im trying to acheive. I have a link which is setup to redirect a phone to another number, this is something set up on our PBX. The link is something simple like Http://phones.company.com/forward?=4332 This aspect is fine, but authentication is required to get to this page, so I get redirected to a login screen. What I want to be able to do is bypass this screen, by somehow hardcoding the username and password, so that the form is submitted automatically and no user intervention is required. The code for the login screen is below. Is this possible?? Ive had a quick look for the obvious, but my javascript skills are poor. Maybe Im looking at this all wrong and there is a much easier way. Any suggestions would be appreciated. Code:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Login</title>
<!-------------------------------------------------------------------------->
<!-- NLS area
<!-------------------------------------------------------------------------->
<link rel="stylesheet" type="text/css" href="req1_files/req.css">
<style type="text/css">
.getPos
{
position:relative; left:0; top:0; visibility:hide; visibility:hidden;
}
.setPos
{
position:absolute; left:0; top:0; visibility:hide; visibility:hidden; zIndex:1;
font-family:"arial","helvetica"; font-size:10pt;
}
.userfield { width:180px; }
.domain { width:120px; }
#loginBtn
{
width:65px;height:25px;
padding-top:4px;
text-align:center;
background-repeat:no-repeat;
cursor:pointer;cursor:hand;
}
.loginBtnReleased { background-image:URL('../images/loginReleased.gif'); }
.loginBtnPressed { background-image:URL('../images/loginPressed.gif'); }
</style>
<!---------------------------------------------------------------->
<!-- Script area -->
<!---------------------------------------------------------------->
<script>
/* layer.js - Accessing layers in a browser independent way */
var oldX;
function show_layer(x)
{
if(document.getElementById)
{
if(document.getElementById(x) != null)
document.getElementById(x).style.visibility="visible";
}
else
if(document.layers)
{
if( document.layers[x] != null )
document.layers[x].visibility="show";
}
else
if(document.all)
{
if( document.all[x] != null )
document.all[x].style.visibility="visible";
}
}
function hide_layer(x)
{
if(document.getElementById)
{
if(document.getElementById(x) != null)
document.getElementById(x).style.visibility="hidden";
}
else
if(document.layers)
{
if( document.layers[x] != null )
document.layers[x].visibility="hide";
}
else
if(document.all)
{
if( document.all[x] != null )
document.all[x].style.visibility="hidden";
}
}
function checkLayerExists( x )
{
if(document.getElementById)
{
if(document.getElementById(x) != null)
return true;
}
else
if(document.layers)
{
if( document.layers[x] != null )
return true;
}
else
if(document.all)
{
if( document.all[x] != null )
return true;
}
return false;
}
function checkLayer( x )
{
if(oldX && oldX!=x)
{
hide_layer(oldX);
show_layer(x);
oldX=x;
}
else if (!oldX && oldX!=x)
{
show_layer(x);
oldX=x;
}
}
function closeLayer(x)
{
hide_layer(x);
oldX=null;
}
function getForm( layer, form )
{
var myForm = null;
if(document.getElementById)
{
myForm = document.forms[form];
}
else
if(document.layers)
{
var myLayer = document.layers[layer];
if( myLayer != null )
myForm = myLayer.document.forms[form];
}
else
if(document.all)
{
myForm = document.forms[form];
}
return myForm;
}
function getFormElement( layer, form, element )
{
var myForm = getForm( layer, form );
if( myForm != null )
return myForm[element];
else
return null;
}
</script>
<script>
/* focushandler.js - handling of focus in input forms */
/*
This focus handler sets the focus to the first empty input text
field at the beginning and to the next empty text field by entering
CR or invoking submit. If all fields are set and CR was entered in
one of the text fields, the submit function will be called automatically.
*/
var myFocusHandlerForm = null; /* only one form for focus handling is supported */
var myAutoSubmit = true; /* invoking submit by CR if all fields are set */
var myAutoSubmitHandler = null; /* invoking this handler */
function initFocusHandler(formName)
{
initFocusHandlerExt(formName, (document.layers != null));
}
function initFocusHandlerExt(formName, chkCR)
{
var form = document.forms[formName];
var setDone = false;
myFocusHandlerForm = form;
for( var i=0, len = form.elements.length; i < len; i++ )
{
var e = form.elements[i];
if( (e.type == "text" || e.type == "password") )
{
if( !setDone && e.value == "" )
{
e.focus( ); /* set focus to first field */
setDone = true;
}
if( chkCR )
e.onkeydown = checkCR; /* establish CR recognizer */
}
}
}
function setAutoSubmit( enabled )
{
myAutoSubmit = enabled;
}
function setAutoSubmitHandler( handler )
{
myAutoSubmitHandler = handler;
}
function checkCR(e)
{
var key = (document.layers) ? e.which :
(document.all) ? window.event.keyCode : e.keyCode;
if( key == 13 )
{
var form = myFocusHandlerForm;
if( verifyInput(form) && myAutoSubmit )
{
if( myAutoSubmitHandler != null )
myAutoSubmitHandler(form);
else
form.submit();
}
}
return true;
}
function verifyInput(form)
{
for( var i=0, len=form.elements.length; i < len; i++ )
{
var e = form.elements[i];
if( (e.type == "text" || e.type == "password") &&
(e.value == null || e.value == "") )
{
form.elements[i].focus(); /* set focus to empty field */
return false;
}
}
return true; /* all are set */
}
</script>
<script>
/* popuphandler.js - handling of popup menus by layers */
var myPopupLayer = new Array();
var myPopupWidth = new Array();
var myPopupByEvent = "";
var myPosByEvent = false;
var myPosY = 0;
if( document.all )
document.onmousedown = setPosY;
function initPopupHandler( popupLayer, popupWidth )
{
document.onmouseup = hidePopupAll;
var newIndex = myPopupLayer.length;
myPopupLayer[newIndex] = popupLayer;
myPopupWidth[newIndex] = popupWidth;
}
function updatePopupWidth( popupLayer, popupWidth )
{
var index = getPopupIndex( popupLayer );
myPopupWidth[index] = popupWidth;
}
function showPopup( posLayer )
{
var index = 0; /* suppose only one layer to popup was defined */
var popupLayer = myPopupLayer[index];
var popupWidth = Math.abs(myPopupWidth[index]);
showPopupLayer( popupLayer, posLayer, (-popupWidth) + 6, 4 );
}
function showPopupLeftAt( popupLayer, posLayer, offsetX, offsetY )
{
var index = getPopupIndex( popupLayer );
var popupWidth = Math.abs(myPopupWidth[index]);
showPopupLayer( popupLayer, posLayer, (-popupWidth) + offsetX, offsetY );
}
function showPopupLayer( popupLayer, posLayer, offsetX, offsetY )
{
if(document.getElementById)
{
var posX = getPopupPositionX( posLayer );
var posY = getPopupPositionY( posLayer );
setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
document.getElementById(popupLayer).style.visibility="visible";
}
else
if( document.layers)
{
var posX = getPopupPositionX( posLayer );
var posY = getPopupPositionY( posLayer );
setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
document.layers[popupLayer].visibility = "show";
}
else
if(document.all)
{
if( !myPosByEvent )
{
var posX = getPopupPositionX( posLayer );
var posY = getPopupPositionY( posLayer );
setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
}
document.all[popupLayer].style.visibility = "visible";
}
}
function isPopupVisible( popupLayer )
{
if(document.getElementById)
return (document.getElementById(popupLayer).style.visibility == "visible");
else
if(document.layers)
return (document.layers[popupLayer].visibility == "show");
else
if(document.all)
return (document.all[popupLayer].style.visibility == "visible");
}
function setPopupVisible( popupLayer, visible )
{
if(document.getElementById)
{
if( visible )
document.getElementById(popupLayer).style.visibility = "visible";
else
document.getElementById(popupLayer).style.visibility = "hidden";
}
else
if(document.layers)
{
if( visible )
document.layers[popupLayer].visibility = "show";
else
document.layers[popupLayer].visibility = "hide";
}
else
if(document.all)
{
if( visible )
document.all[popupLayer].style.visibility = "visible";
else
document.all[popupLayer].style.visibility = "hidden";
}
}
function getPopupIndex( popupLayer )
{
for( var i = 0; i < myPopupLayer; i++ )
if( myPopupLayer[i] == popupLayer )
return i;
return 0;
}
function setPopupPosition( popupLayer, posX, posY )
{
if(document.getElementById)
{
document.getElementById(popupLayer).style.left = posX;
document.getElementById(popupLayer).style.top = posY;
}
else
if(document.layers)
{
document.layers[popupLayer].pageX = posX;
document.layers[popupLayer].pageY = posY;
}
else
if(document.all)
{
document.all[popupLayer].style.left = posX;
document.all[popupLayer].style.top = posY;
}
}
function getPopupPositionX( posLayer )
{
if(document.getElementById)
{
var elm = document.getElementById(posLayer);
var pos = document.getElementById(posLayer).offsetLeft;
if( pos <= 15 )
{
while ( elm != null )
{
pos += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return pos;
}
else
if(document.layers)
return (document.layers[posLayer].pageX);
else
if(document.all)
{
var elm = document.all[posLayer];
var pos = document.all[posLayer].offsetLeft;
if( pos <= 15 ) /* IE.5.0 bug: adding padding to offset */
{
while ( elm != null )
{
pos += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return pos;
}
}
function getPopupPositionY( posLayer )
{
if(document.getElementById)
{
var elm = document.getElementById(posLayer);
var pos = document.getElementById(posLayer).offsetTop;
if( pos <= 15 ) /* IE.5.0 bug: adding padding to offset */
{
pos = -6;
while ( elm != null )
{
pos += elm.offsetTop;
elm = elm.offsetParent;
}
}
else
if(document.all)
{
var posDiff = (pos > myPosY) ? pos - myPosY : myPosY - pos;
if( posDiff < 20 ) /* IE.6.0 bug: cumulative patch */
pos -= 15;
else
pos = (pos/2);
var tableOffset = 2;
var a = window.document.all;
for( var i=0; i < a.length; i++)
{
if( a[i].name == "maintable" )
{
tableOffset = (a[i].offsetTop / 2) - 1;
break;
}
}
pos += tableOffset;
}
return pos;
}
else
if(document.layers)
return (document.layers[posLayer].pageY);
else
if(document.all)
{
var elm = document.all[posLayer];
var pos = document.all[posLayer].offsetTop;
if( pos <= 15 ) /* IE.5.0 bug: adding padding to offset */
{
pos = -6;
while ( elm != null )
{
pos += elm.offsetTop;
elm = elm.offsetParent;
}
}
else
{
pos = (pos/2);
var tableOffset = 2;
var a = window.document.all;
for( var i=0; i < a.length; i++)
{
if( a[i].name == "maintable" )
{
tableOffset = (a[i].offsetTop / 2) - 1;
break;
}
}
pos += tableOffset;
}
return pos;
}
}
function enablePopupByEvent( popupLayer, enable )
{
myPopupByEvent = popupLayer;
myPosByEvent = enable;
}
function setPopupPosByEvent(e)
{
if( myPosByEvent && document.layers == null && document.all )
{
if( document.all[myPopupByEvent] != null )
{
var ev = window.event;
var posX = ev.clientX - ev.offsetX - 2 - myPopupWidth;
var posY = ev.clientY - ev.offsetY + 6;
setPopupPosition( myPopupByEvent, posX, posY );
}
}
return true;
}
function setPosY(e)
{
myPosY = window.event.clientY + document.body.scrollTop;
return false;
}
function hidePopupAll(e)
{
hidePopup();
}
function hidePopup()
{
for( var i = 0; i < myPopupLayer.length; i++ )
hidePopupLayer( myPopupLayer[i] );
}
function hidePopupLayer( popupLayer )
{
if(document.getElementById)
{
if(document.getElementById(popupLayer) != null)
document.getElementById(popupLayer).style.visibility = "hidden";
}
else
if(document.layers)
{
document.layers[popupLayer].visibility = "hide";
}
else
if(document.all)
{
if( document.all[popupLayer] != null )
document.all[popupLayer].style.visibility = "hidden";
}
}
</script>
<script>
/* utilscript.js - extended string functions, etc. */
function checkChars( chkStr )
{
chkStr = escape(chkStr);
/* special handling for phone numbers */
for( ; (i = chkStr.indexOf('+')) >= 0; )
{
var s = (i > 0) ? chkStr.substring( 0, i ) + "%2B" : "%2B";
chkStr = s + chkStr.substring( i+1, chkStr.length );
}
return chkStr;
}
function trimString( str )
{
return removeTrailingBlanks( removeLeadingBlanks( str ) );
}
function removeLeadingBlanks( str )
{
while( str.length > 0 && str.charAt( 0 ) == ' ' )
str = str.substr( 1, str.length - 1 );
return str;
}
function removeTrailingBlanks( str )
{
while( str.length > 0 && str.charAt( str.length - 1 ) == ' ' )
str = str.substr( 0, str.length - 1 );
return str;
}
</script>
<script language="JavaScript">
function init()
{
initFocusHandlerExt("doLogin",false);
setAutoSubmitHandler( sendFormHandler );
setLastUser( "", "" );
}
function doSendForm()
{
var form = document.doLogin;
var check = false;
var pwdforgotten = false;
if (pwdforgotten)
{
if (verifyUser())
check = true;
}
else
{
if( verifyInput( form ) )
check = true;
}
if (check)
sendFormHandler( form, pwdforgotten );
return true;
}
function verifyUser ()
{
var user = document.forms.doLogin.j_username.value
if (user == "" || user.length == 0)
{
document.forms.doLogin.j_username.focus();
return false;
}
return true;
}
function sendFormHandler( form, pwdforgotten)
{
var sendForm = document.forms.sendLogin;
var user = document.forms.doLogin.j_username.value;
var passwd = document.forms.doLogin.j_password.value;
var domainList = document.forms.doLogin.j_domain;
var index = domainList.selectedIndex;
var authMode = (index >= 0) ? domainList.options[index].value :
"TELAS";
if( authMode == "" )
{
alert( "Please enter the name of your windows domain" );
return;
}
if( index >= 0 )
{
var domain = domainList.options[index].value;
if (domain != "TELAS")
user = domain + "\\" + user;
sendForm.authMode.value = authMode;
}
else
{
sendForm.authMode.value = "TELAS";
}
// fill hidden form to send request
sendForm.j_username.value = user;
sendForm.j_password.value = passwd;
if (pwdforgotten)
sendForm.j_pwdforgotten.value = "forgotten";
sendForm.submit();
}
function setLastUser( user, wrongpwd )
{
if( user != "" )
{
var i = user.indexOf( '\\' );
if( i > 0 )
{
var domainList = document.forms.doLogin.j_domain;
var domainIndex = -1;
var domain;
domain = user.substring( 0, i );
user = user.substring( i + 1, user.length );
for( i = 0; i < domainList.options.length; i++ )
{
var value = domainList.options[i].value;
if( value == domain )
{
domainIndex = i;
break;
}
}
if( domainIndex >= 0 )
domainList.selectedIndex = domainIndex;
}
document.forms.doLogin.j_username.value = user;
if( wrongpwd )
document.forms.doLogin.j_password.focus();
}
}
function doSendPassword()
{
var request = "/tweb/login/req?pwdForgotten=";
var user = document.doLogin.j_username.value;
request = request + "&authuser=" + user;
window.location.href = request;
}
</script>
</head><body class="common" onload="init();">
<p> </p>
<div align="center"><center>
<form name="doLogin" action="javascript:(void 0);" onsubmit="verifyInput(this); return false;">
<!---------------- login dialog for an user session -------------------->
<noscript>
<font color=red>To use ComAssistant CTI<br>you must activate JavaScript at first.</font><p>
</noscript>
<table class="frame" border="1" cellpadding="4" cellspacing="0">
<tbody><tr><td class="caption" align="center"><b>ComAssistant CTI</b></td></tr>
<tr><td class="light" valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="8">
<!------------------------------------ user ------------------------>
<tbody><tr>
<td> </td>
<td class="dialog" align="left">User name:</td>
<td class="dialog"><input value="5255" class="userfield" size="18" maxlength="64" name="j_username" width="180px"></td>
<td> </td>
</tr>
<!------------------------------------ domain ------------------------>
<tr>
<td> </td>
<td class="dialog" align="left">Password:</td>
<td class="light"><input class="userfield" size="18" maxlength="32" name="j_password" width="180px" type="password"></td>
<td> </td>
</tr>
<tr>
</tr><tr>
<td> </td>
<td class="dialog" align="left">Domain:</td>
<td class="light" align="right">
<select class="light" width="180" name="j_domain">
<option selected="selected" value="CAPLogin\XXXXX">XXXX</option>
<option value="CAPLogin\">CTI Authentication</option>
</select>
</td>
<td valign="top"><div id="editDomainPos" class="getPos"> </div></td>
</tr>
<tr><td> </td>
<!------------------------------------ password forgotten ------------------------>
<td> </td>
<!------------------------------------ OK ---------------------------------------->
<td class="title-light" align="right">
<input value="OK" onclick="return doSendForm();" width="100" type="submit">
</td>
<td> </td>
</tr>
</tbody></table>
</td></tr>
</tbody></table>
</form>
<!------------------ form sended to servlet ------------------------>
<form name="sendLogin" method="GET" action="https://xxxxx.xxx.xx:xxx/tweb/j_security_check;jsessionid=B9CB670DB13E02625B197D382750FC38">
<input name="j_username" value="" type="hidden">
<input name="j_password" value="" type="hidden">
<input name="j_pwdforgotten" value="" type="hidden">
<input name="authMode" value="" type="hidden">
<input name="origReq" value="/tweb/portal/req?getPage=/userindex.html" type="hidden">
</form>
<!------------------------------------------------------------------>
</center></div>
</body></html>
Hello all..New to the board and javascript. Link to the page in question:http://cgi.ebay.com/test-page-only-D...item27ae5e0654 I have a problem here..Confused maybe someone can spot it I can't. I am using Firefox 3.5-6 and IE 7 and Chrome 4.1......Just CSS and Javascript. I am using "Tiny Slider" JS. for my image gallery, most of the content was deleted from the code for security purposes. Head and body tags are not necessary for Ebay. The problem is the gallery I think. This page works great (Image gallery) outside of Ebay..but when I insert in Ebay the gallery will not position the images properly except the first one. After the first image 2, 3, and 4 pass by without centering and some not at all?? Layout problem? I need this to work for Ebay..So any help would be appreciated. Does any one have any ideas for javascript homepage apps
Hi all, I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies Thanks in advance!! Kyle Hi. I'm new to javascripting and i'm trying to familiarise myself with it for my uni course. The code i'm trying to run is below, but for some reason it doesn't work. It is supposed to bring up a prompt box asking for the date of birth, but it doesn't. Can anyone figure out why? Any help would be much appreciated. Code: <html>
<head>
<title>Numerological Reading</title>
<script type="text/javascript">
// Numerological Horoscope
var golden = 0;
var birthdate = null;
var planet = null;
// prompt for input and check to see that the input is 8-digit number
while (birthdate.length != 8 || isNaN(parseInt(birthdate)))
{
birthdate = prompt("Please enter your date of birth as an 8-digit number DDMMYYYY","");
}
// calculate the golden number in range 1..9
golden = eval(birthdate) % 9;
if (golden==0) golden=9;
// now work out ruling planet
switch (golden)
{
case 1 : planet = "The Sun"; break;
case 2 : planet = "The Moon"; break;
case 3 : planet = "Jupiter"; break;
case 4 : planet = "Sun/Uranus"; break;
case 5 : planet = "Mercury"; break;
case 6 : planet = "Venus!; break;
case 7 : planet = "Moon/Neptune"; break;
case 8 : planet = "Saturn"; break;
case 9 : planet = "Mars"; break;
// TO BE DONE: put in the other cases...
default: planet = "Unknown"; break;
}
// finally, write the page
document.write("Your golden number is ");
document.write(golden);
document.write("<br>Your ruling planet is "+planet);
</script>
</head>
<body>
</body>
</html>
Samii x Not entirely lost in the dark with jquery here, ive done quite a bit with it. I was just wondering if anyone might have ideas to solve this particular problem i am having. The code pretty much looks like this... Code: $('#created').hover(
function(){
if(y == false)
{
$(this).css({'border' : '1px groove #dfdfdf'});
$('div#csite').show('slide',{ direction: "down" },500);
$('div#sa').hide('slide',{ direction: "up" },500);
};
},
function()
{
$(this).css({'border-style' : 'none'});
$('div#csite').hide('slide',{ direction: "up" },500);
$('div#sa').show('slide',{ direction: "down" },500);
});
//home hover
$('#home').hover(
function(){
if(y == false)
{
$(this).css({'border' : '1px groove #dfdfdf'});
$('div#psite').show('slide',{ direction: "down" },500);
$('div#sa').hide('slide',{ direction: "up" },500);
};
},
function()
{
$(this).css({'border-style' : 'none'});
$('div#psite').hide('slide',{ direction: "up" },500);
$('div#sa').show('slide',{ direction: "down" },500);
});
The div sa is always present (its a sponsor logo) when hovering over a #created link or #parent site link, a div csite or psite comes up, (image representing parent site, image representing creator site) making them work is no problem however i was wondering if anyone had any ideas as how to change this so that when you are quickly moving from the created link to the parentsite the .hide and .show animation for #sa does not overlap, or does not fire otherwise they get in the way of each other... any help would be appreciated thanks in advance! Hello javascript experts... I am following this blog on calling web service in javascript. I am getting syntax error, in my javascript... Code: <action trigger="onLoad">
<!--
mainWindow.visible = true;
<script
type="text/javascript"
src="prototype.js"></script>
<script
type="text/javascript"
src="ws.js"></script>
<script type="text/javascript">
function getSalesXml(name, container) {
var call = new WS.Call('<url to the wsdl>');
var nsuri = 'http://example';
var qn_op = new WS.QName('<functionName>',nsuri);
var qn_op_resp = new WS.QName('sayHelloResponse',nsuri);
call.invoke_rpc(
qn_op,
new Array(
{name:'userId',value:<user>}
{name:'pwd',value:<password>}
),null,
function(call,envelope) {
var ret =
envelope.get_body().get_all_children()[0].
get_all_children()[0].get_value();
container.innerHTML = ret;
$('soap').innerHTML = arguments[2].escapeHTML();
}
);
}
</script>
-->
</action>
at line: Code: src="ws.js"></script> Can anybody correct this error..., Hi, thanks for your time first of all- secondly, I am at a loss for what to do next to get these slideshows functioning. You can see the current iteration he http://www.pauljameswilliams.com/portfolio.html I am using hte plug in galleria, and I have got it working in a stand alone version with the same images and and folder structure. The difference may be that I have the content nested in these div tags? to create tabs. i really don't know. Here is the structure within the portfolio tab, under the Identity heading: ( there will be more images once I get this working: Code: <div> <div class="demo"> <ul class="gallery_demo galleria"> <li><img src="images/portfolio01.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li> <li><img src="images/portfolio02.jpg" alt="Stones" title="Stones - from Aple images"></li> <li><img src="images/portfolio03.jpg" alt="Grass Blades" title="Apple nature desktop images"></li> </ul> <div class="galleria_container"></div> <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p> </div> </div> I can give you more code if necesary, but I don't want to overwhelm anyone. thanks. I've seen this really nice slider on www.formfiftyfive.com (when you click the links at the top i.e about, it will drop down revealing content) It moves the entire site rather than just overlay. I really like this and would love to implement it into my site? Any ideas what it is and how I can use it? hi guys, maybe im being stupid but any ideas why this doesnt seem to work: Code: function checkSCItems() { //check sccost not blank due to ajax need to do lookup
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request");
return;
}
var params = "?scnumber=" + escape(document.getElementById('scnumber').value);
var url="_check_scitems.php";
url=url+params;
ajaxedInner = "";
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT");
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200) {
var checkSCItemsResponse = xmlHttp.responseText;
if(checkSCItemsResponse == 'found') {
return true;
} else {
window.location.hash = 'scpricebuildup2';
alert('You must first create some cost items');
return false;
}
} else {
alert('There was a problem, please try again, or contact the Administrator');
return false;
}
}
}
}
im calling this and if it returns true another function is called but for some reason the 2nd function never seems to happen. (that function works fine so it cant be that - if i just set this function to return true everything works fine too) its being called like so: Code: <a href='javascript:;' onclick="if(checkSCItems() && validateText(document.subcontract_order,['scdate','scworks','scpayment','scfirstpayment','scpaymentinterim','scbalance','scretentionat','sccommence','sccompletion','sclabour','scplant','scmaterials']) && validateDate(document.subcontract_order, ['scdate','scfirstpayment','scbalance','sccommence','sccompletion']) && validateSelectNoBlank(document.subcontract_order, ['trading_name'])){window.open('subcontract_order_print.php?id=<?php echo writeIfSet($id) ?>')}">
is there some issue with ajax and return true? do i need to tell it to call another function that calls return true etc? Hi all, I have a small message board with TinyMCE (WYSIWYG) editor integrated into it. It works fine for everything except when someone tries to post code... especially content with the < or > characters. For example, a person may try to post an example of how to make red text in HTML. But when he does this: <span style="color:#ff0000;">Hello</span> Of course it comes out like this: Hello Or C code... #include <stdio.h> gets stripped off as INVALID HTML! So, I ended up making a Javascript filter that pre-processes pasted data and turns all < characters into "‹" and all > into "›" characters. BTW, those two characters look very similar to < and >. They look like this: ‹ and › so that, for example: ‹span style="color:#ff0000;"›Hello‹/span› is NOT interpreted as HTML. Similarly, I pre-convert <br /> to "↵" which is a little "down/left/arrow" symbol that is on most ENTER keys on a keyboard. After converting all the < and > characters, I then restore the ↵ back to <br /> (I do this to preserve the < and > in the br!). The resulting text is posted verbatim as a message, but if it's placed in a CODEBOX, then the codebox does an "onfocus="fix-it-back" meaning that the codebox innerHTML is converted back to < and > characters so it can be selected and copied as real code. All this seems to me to be complicated and convoluted. My gut tells me there is a simpler, better way to do it. Any suggestions or ideas please? Will be appreciated! Thanks! -- Roger Hi all I'm having trouble with my XML news feed being displayed in IE. The JS calls the XML, and displays the relevent data on the homepage. This works beautifully in firefox, but fails completely in IE, what am I doing wrong? The Code for the script follows, and is contained within the <head> of the the HTML; Code:
<script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
document.getElementById("picture2").innerHTML="<img src=" + pic + " />";
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
In FF, the XML is read, and the corresponding data is entered automatically into the HTML document. Everything works perfectly. In IE, nothing seems to happen, no text is displayed and the image is just the broken link icon. I assume I need to modify my ELSE statement somehow, but have no idea what to do! Unfortunately I cannot provide a link to the webpage, it has not been uploaded as it doesn't work yet. Would really appreciate being told where I've gone wrong so I can correct the code myself. Thanks, Dan Hello, I'm a novice with java script and I can't figure out why my script will work locally, but not live. Here is the link. http://www4.uwm.edu/recsports/ There is supposed to be a rotating slideshow in the header, but it's just a black box. Thanks! 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. Code:
function initMenu(){
var menus, menu, text, a, i, CurrentID;
menus = getChildrenByElement(document.getElementById("menu"));
CurrentID = document.getElementById("auto");
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
//CurrentID.showMenu; thought this would work but it doesn.t
}
I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts Hello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
};
Many thanks Liam If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet. I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this: Menu Item 1 [Click to expand] -Sub Item 1.1 [Click to expand] -Sub Item 2.1 [Click to get to page] Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please? URL: http://dinotamermeep.blogspot.com/p/blog-archive.html Thank you, -Meepski |
|||||||