|
JavaScript - Swap Style Display
Hello,
I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF. That's my code: 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>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
if (Mailbox.style.display == "none") {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
// document.getElementById('Mailbox').setAttribute('style','display:block');
document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
} else {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
document.getElementById('Mailbox').setAttribute('style','display:none');
// document.getElementById('PhoneNum').setAttribute('style','display:block');
}
}
</script>
</head>
<body>
<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>
</body>
</html>
Can anyone help me sort this out? Thanks a lot, David Similar TutorialsHere is my code... Code: <html>
<head>
<script type="text/javascript">
function nameofmonth(month)
{
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
return monthname[month]
}
function monthdays(month,year)
{
var daysofmonth=new Array(31,28,31,31,30,31,31,31,30,31,30,31)
if(year%4==0)
daysofmonth[1]=29
return daysofmonth[month]
}
function close(){
document.getElementById("container").style.display='none'
}
function table()
{
var now=new Date()
var hour=now.getHours()
var minute=now.getMinutes()
var second=now.getSeconds()
var date=now.getDate()
var month=now.getMonth()
var year=now.getFullYear()
now.setFullYear(year,month,1)
var firstday=now.getDay()
var monthname=nameofmonth(month)
var daysofmonth=monthdays(month,year)
if(firstday>0)
var k=-(firstday-1)
else
k=1
var table="<table border=5 cellspacing=3cellpadding=8>"
table +="<tr><th colspan=7>"+monthname + date+"th</th> <td style='cursor:pointer' onclick='close()'>[close]</td></tr>"
table +="<tr><th>sun</th><th>mon</th><th>tue</><th>wed</th><th>thu</th><th>fri</><th>sat</th></tr>"
for(var i=0;i<5;i++)
{
table+="<tr>"
for(var j=0;j<7;j++)
{
if(k<=daysofmonth && k>0)
{ if(k==date)
table+='<td id="clock" bgcolor="aqua">'+k+'</td>'
else
table+='<td style="cursor:pointer">'+k+'</td>'
k=parseInt(k)
}
else
table+="<td></td>"
k++
}
table+="</tr>"
document.getElementById("calender").innerHTML=table
}
}
</script>
</head>
<body>
<input type="text" onclick="table()"/>
<table id="container"><tr><td id="calender"></td></tr></table>
</body>
</html>
HERE is a close cell in table.when it is clicked,the close() function will called and the calender will disappear.but it is not happening.please help me ,what is wrong.Thanks in advance... // JavaScript Document function open_tab(el){ if(document.getElementById(el).style.display == "none"){ document.getElementById(el).style.display = "block"; } } function close_tab(el){ if(document.getElementById(el).style.display == "block"){ document.getElementById(el).style.display = "none"; } } Pretty basic code, works great in FireFox and Chrome in both HTML and ASPX pages. However in IE it only works properly in the .aspx pages. There are a series of links so when you click it hides the div's which are set to display:"block", except for one "div" which won't change to display"none" and I don't know why. Hi all, I'm trying to hide a form button in javascipt. Within a function I have the following ... Quote: document.getElementById(button).display='none'; However it just errors and says button is undefined. button is the id and name of the form button btw. Do I need to define which form it is part of or something else? Many thanks for any pointers or help. Sir P Hi and thanks in advance! Someone on this site made a form for me that hides and displays fields, depending on which variable is chosen from a given array. They did a very good job with it with one exception. It seems the code that is used to hide certain fields also hides the form data rather than posting it when the form is submitted. Here is the code for both the java (listed first) and the form itself. Code: // Funtion
// Description: show or hide element in the form according to selected element
//
function show_hide(){
if (!document.getElementById) return false;
fila = document.getElementById('tr_firstname');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_firstname_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments_data');
fila.style.display = "none"; //hide
var strtext ;
var nuoption= document.frmbodydata.csreason.length;
var nuindice = document.frmbodydata.csreason.selectedIndex;
var nuvalueSelect = document.frmbodydata.csreason.options[nuindice].value;
var strtextSelect = document.frmbodydata.csreason.options[nuindice].text;
if (nuvalueSelect==0 )
{
return;
}
fila = document.getElementById('tr_description_comments');
fila.style.display = ""; //show
fila = document.getElementById('tr_description_comments_data');
fila.style.display = ""; //show
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_firstname');
fila.style.display = ""; //show
fila = document.getElementById('tr_firstname_data');
fila.style.display = ""; //show
fila = document.getElementById('tr_email');
fila.style.display = ""; //show
fila = document.getElementById('tr_email_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_url');
fila.style.display = ""; //show
fila = document.getElementById('tr_url_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==4 )
{
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = ""; //show
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = ""; //show
}
}
//
// Function
// Description: Validate the form for submit
//
function ValidateForm( form ) {
var nuindice = form.csreason.selectedIndex;
var nuvalueSelect = form.csreason.options[nuindice].value;
if (nuvalueSelect==0 )
{
return false;
}
valor = form.receipt_invoice.value;
if (!freturn(valor)) return false;
valor = form.description_comments.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
valor = form.firstname.value;
if (!freturn(valor)) return false;
}
valor = form.lastname.value;
if (!freturn(valor)) return false;
valor = form.email.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==4 )
{
valor = form.url.value;
if (!freturn(valor)) return false;
}
alert ("Thank you for your comment.")
return true
}
//
// Function
// Description: Function to return TRUE or FALSE for inclomplete data
//
/*function freturn(pbolvalue)
{
if( pbolvalue == null || pbolvalue.length == 0 || /^\s+$/.test(pbolvalue) )
{
alert ("Incomplete Data, check please.");
return false;
}else{
return true;
}
}
*/
function ReloadCaptchaImage(captchaImageId)
{
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false;
}
Code: <center> <form id="frmbodydata" name="frmbodydata" onsubmit="return ValidateForm(this);" action="http://www.SnapHost.com/captcha/WebFormSubmit.aspx" method="post"> <input id="SnapHostID" name="SnapHostID" value="2FMYX5LLTQZQ" type="hidden" />
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Reason for contact</td>
</tr>
<tr>
<td><select id="csreason" name="csreason" onchange="show_hide();" align="left"> <option value="0">Please Select One</option> <option value="1">Contact</option> <option value="2">Report Bad Link</option> <option value="3">Gallery Submission</option> <option value="4">Preferred Partner Submission</option> <option value="5">Link Exchange</option> </select></td>
</tr>
<tr id="tr_firstname" style="display:none;">
<td>First name/Last name</td>
</tr>
<tr id="tr_firstname_data" style="display:none;">
<td><input id="firstname" /><input id="lastname" align="left" type="text" /></td>
</tr>
<tr id="tr_email" style="display:none;">
<td>Email</td>
</tr>
<tr id="tr_email_data" style="display:none;">
<td><input id="email" size="30" maxlength="30" align="left" type="text" /></td>
</tr>
<tr id="tr_receipt_invoice" style="display:none;">
<td>Receipt/Invoice</td>
</tr>
<tr id="tr_receipt_invoice_data" style="display:none;">
<td><input id="receipt_invoice" name="receipt_invoice" size="15" maxlength="15" align="left" type="text" /></td>
</tr>
<tr id="tr_url" style="display:none;">
<td>URL</td>
</tr>
<tr id="tr_url_data" style="display:none;">
<td><input id="url" size="80" maxlength="80" align="left" type="text" /></td>
</tr>
<tr id="tr_description_comments" style="display:none;">
<td>Description/Comments</td>
</tr>
<tr id="tr_description_comments_data" style="display:none;">
<td><textarea id="description_comments" rows="10" cols="50" align="left"> </textarea></td>
</tr>
<tr>
<td><i>Enter security code</i></td>
<td>SECURITY CODE</td>
</tr>
<tr>
<td><input name="CaptchaCode" class="txtFields" maxlength="6" style="width:130px; height:28px; font-size:24px; text-align:center;" type="text" /></td>
<td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img id="CaptchaImage" alt="Web Form Code" style="margin-left:20px; border:1px
solid #999999;" src="http://www.SnapHost.com/captcha/WebForm.aspx?id=2FMYX5LLTQZQ&ImgType=2" /></a> <br /> <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a></td>
</tr>
<tr>
<td align="center"><input src="http://www.theopenpussy.com/1/images/submit.gif" alt="Submit button" type="image" /></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form> </center>
Sorry for all the code! Is there anything I can do to maintain the hide and seek nature of the forms and show the data that is submitted, or am I stuck displaying all fields all the time? if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element could somebody plz tell me why this isnt working?? i want it specifically as it is because i need it in a bigger picture Code: <body>
<img id="down0" src="images/greentick.png" onclick="swap(0,1)" />
<br />
<table><tr><span id="0"><td>asdasdasd</td></span></tr></table>
<br />
<table><tr><span id="1"><td>ante gamisou re gyfto</td></span></tr></table>
<script type="text/javascript">
/*<![CDATA[*/
function swap(idA,idB){
var cellA=document.getElementById(idA);
var cellB=document.getElementById(idB);
if(cellA&&cellB){
var temp=cellA.innerHTML;
cellA.innerHTML=cellB.innerHTML;
cellB.innerHTML=temp;
}
alert(idB);
}
/*]]>*/
</script>
</body>
I want the text in a textbox to change to red when I click the box and back to blue when I click it again. I would prefer an inline solution like: <input type="text" value="CHANGE COLOR" onclick="this.style.color='red';"/> In firefox Images 1 2 & 3 won't swap and in IE the img src(not PhotoBig) wont show pics 1 2 & 3 any reason why? I'm new to javascript so its probably a dumb reason? Please help if you can. Code: <script type="text/javascript">
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script>
Code: <img src="graphics/travel/big/keysfish1.gif" name="PhotoBig" style="border:1px solid black">
<table>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish1.gif', 0, false); return false;">
<img src="graphics/travel/thumbnails/keysfish1.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish2.gif', 1, true); return false;">
<img src="graphics/travel/thumbnails/keyfish2.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish3.gif', 2, true); return false;">
<img src="graphics/travel/thumbnails/keyfish3.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/keysfish4.gif', 3, true); return false;">
<img src="graphics/travel/thumbnails/keyfish4.gif" style="border:1px solid black">
</a>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
Move the cursor over the images/picture you wish to preview.
</td>
</tr>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysturtle1.gif', 4, true); return false;">
<img src="graphics/travel/thumbnails/keysturtle1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/tyleranthony.gif', 5, true); return false;">
<img src="graphics/travel/thumbnails/tyleranthony.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/uwdiver1.gif', 6, true); return false;">
<img src="graphics/travel/thumbnails/uwdiver1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/uwlou.gif', 7, true); return false;">
<img src="graphics/travel/thumbnails/uwlou.gif" style="border:1px solid black">
</a>
</td>
</tr>
</table>
All, I have the following code: Code:
<div class="col-1">
<div id="swap">
<img src="images/gallery-img3-big.jpg" alt="" />
</div>
</div>
<div class="col-2">
<div class="list3">
<ul>
<li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated. Thanks in advance. How do I swap these two paragraphs at will by clicking the buttons? Demo at: http://aapress.com.au/demo/paragraphswap/demo.html At present, for some reason, clicking button 2 makes both paragraphs appear. The effect I am after is to toggle individual paragraphs on and off, with the option of displaying both at once. Code: <html>
<head>
<title>Paragraph swap</title>
<script>
with (document)
{
write("<STYLE TYPE='text/css'>");
write(".hiddentext {display:none;} .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
write("</STYLE>");
}
function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}
</script>
</head>
<body>
<div align="center">
<center>
<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td bgcolor="#FFFF55" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td width="100%" colspan="2"> </td>
</tr>
<tr>
<td width="40%"> </td>
<td width="60%">
<p onclick="expandIt(el1); return false;">
<img border="1" src="1.gif" width="23" height="15"> Click
buttons
<span onclick="expandIt(el2); return false">
<img border="1" src="2.gif" width="23" height="15"></a></p>
</span></td>
</tr>
<tr>
<td colspan="2"><br>
<div id="el1" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#CCFFFF">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%">
<tr>
<td valign="top">PARAGRAPH 1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<div id="el2" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#FFCCCC">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td valign="top">PARAGRAPH
2</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<br>
</center></div>
</td>
</tr>
</table>
</center></div>
</body>
</html>
Here is the code I'm using: Code: <style type="text/css" rel="stylesheet" href="">
li#button {
cursor:pointer;
}
</style>
<script type="text/javascript">
var num = 6; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>
<body>
<div id="content">
<ul id="a-menu">
<li id="button" onClick="swap(0)"><b>button1</b></li>
<li id="button" onClick="swap(1)"><b>button2</b></li>
<li id="button" onClick="swap(2)"><b>button3</b></li>
</ul>
<div id="swap0" class="block">content 1</div>
<div id="swap1" class="hidden">
<ul id="submenu">
<li id="button" onClick="swap(3)">button1</li>
<li id="button" onClick="swap(4)">button2</li>
<li id="button" onClick="swap(5)">button3</li>
<li id="button" onClick="swap(6)">button4</li>
</ul>
<div id="swap3" class="block">content 2</div>
<div id="swap4" class="hidden">content 3</div>
<div id="swap5" class="hidden">content 4</div>
<div id="swap6" class="hidden">content 5</div>
</div>
<div id="swap2" class="hidden">content 6</div>
</div>
</body>
</html>
Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this?? Below is the routine I am using that when invoked swaps images for other images: Code: <script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
document.getElementById('mainImage1').src = 'L1Bswap.gif';
document.getElementById('hand1').src = 'handr.gif';
document.getElementById('help1_pic').src = 'answers2.gif';
document.getElementById('homework').src = 'spacer.gif';
document.getElementById('instruct').src = 'spacer.gif';
document.getElementById('instructflag').src = 'spacer.gif';
}
}
</script>
Fairly simple and works well. But one of the images I would like to vanish (using the empty spacer.gif) has a border: Code: <img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left"> It must have this black border, but when it gets swapped for a blank, I am left with the black square. Anyone have any idea how to vanish the border along with the graphic? (I have some vague idea that "border" is not used any more, but anyway...). I'm new to this...please help. I have several iframes. A few of them have rollovers inside the iframe htm(s). In my navi bar one of the drop down tabs (onclick points to the iframe) called qlist.htm. This works. But in the qlist is a text rollover -fri4_june.htm. this works. But when I go back to the qlist tab it stays on the fri4_june.htm and doesn't go back to the qlist.htm. I'm thinking it needs to be a swap restore() but not sure how to write it a where. here's some of the code: index: <script type="text/javascript" src="scripts_courtt/drdn.js"> </script><script type="text/javascript"> <!-- function show(which) { for ( var n = 1; n < 999999; ++n ) { var iframe = document.getElementById("ifr" + n); if ( iframe == null ) return; // no more to check iframe.style.display = ( which == n ) ? "block" : "none"; } } //--> </script> <iframe id="ifr2" src="qlist.htm" width="640" height="520" scrolling="no" frameBorder="0" style="display:none"></iframe> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Upcoming Shows</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#" onclick="show(2)">Quick List</a> <a href="http://www.myspace.com" rel="nofollow" target="_blank">MySpaceCal</a></div></li> qlist.htm: <div class="qlist2"> <a href="juneshows/fri4_june.htm" rel="nofollow" target="_self">Jun 25 2010 8:00P</a><br /> </div> thankx.... In the following code I display two buttons in the randommember div. I then append the randommember div with contents of the rana variable. This variable stores information related to a featured member and displays it as a link. Basically buttons appear on screen which are then followed by the featured member. But I would like to switch this around and have the featured member appear followed by the buttons. How can I do this? Obviously I can't put the buttons into the rana variable because then these become a link also removing the links functionality. Does anybody have any ideas how I can solve this problem. I am new to Javascript so please be gentle. Code: r = Math.floor(Math.random() * x.length);
function randommember() {
name = (x[r].getElementsByTagName("name")[0].childNodes[0].nodeValue);
sex = (x[r].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
seeking = (x[r].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
image = (x[r].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
rana = document.createElement('a');
aIdName = 'random';
ahref = '#';
aclick = 'show(' + r + ')';
rana.setAttribute('id', aIdName);
rana.setAttribute('href', ahref);
rana.setAttribute('onclick', aclick);
rana.innerHTML = "<h3>Featured Member</h3><br /><img src='images/" + image + ".gif' /><br /><br />Name: " + name + "<br />Sex: " + sex + "<br />Seeking: " + seeking;
document.getElementById("randommember").innerHTML = "<input type='button' onclick='previous()' value='<<' /><input type='button' onclick='next()' value='>>' /><br />";
document.getElementById("randommember").appendChild(rana);
}
So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2. After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button. Any help would be greatly appreciated. Hey guys, Im a little stuck with a JQ script im trying to create. First the html: Code: <div id="image_holder">
<img src="images/default.jpg" id="image_swap" />
</div>
<ul id="links" class="test">
<li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
<li><a href="#" name="images/02.jpg">Joker 1</a></li>
<li><a href="#" name="images/03.jpg">Joker 2</a></li>
</ul>
What im trying to accomplish is: 1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left. 2.) if the mouse is: 2a) swap the current image loaded out with the new image to be loaded else: 2b.)swap the current image loaded out with the default image. I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image... Code: jQ('#links li a').hover(
function() {
var img = jQ(this).attr("name");
var parent = jQ(this).parent().parent().attr("id");
jQ("#image_swap").fadeOut("medium", function() {
// if mouse is within the #link id dont show default image
if(parent === "links") {
jQ(this).attr("src", img);
jQ(this).fadeIn("medium");
}
// if the mouse is outside the #link id show the default image
})
},
function() {
jQ("#image_swap").attr("src", "images/default.jpg");
}
);
Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page. I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
Hi, I'm been struggling with this for a week now, I'm new to javascript so please bear with me. What I have been trying to do is get the div to swap once you go over a <td>, at the moment the when you point on one of the <td> it takes the div away. I have a feeling it's got to do with this piece of code: Code: if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
Here is the complete code: Code: <script language="javascript">
function showDiv(elem)
{
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
var styler = document.getElementById("style1_"+arr[i].id);
styler.className = "stylegray";
var styler = document.getElementById("style2_"+arr[i].id);
styler.className = "stylegray";
}
}
var arr = document.getElementsByTagName('img')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,5) == "arrow") {
arr[i].src = 'images/blank.jpg';
}
}
var arr = document.getElementsByTagName('a')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,7) == "style3_") {
var styler = document.getElementById(arr[i].id);
styler.style.color = "#e3e3e3";
}
}
e2 = document.getElementById(elem);
e2.style.display = 'block';
e3 = document.getElementById("style1_"+elem);
e3.className = "stylered";
e3 = document.getElementById("style2_"+elem);
e3.className = "stylegray2";
e3 = document.getElementById("style3_"+elem);
e3.style.color = "darkred";
e3 = document.getElementById("arrow_"+elem);
e3.src = "images/arrow.png";
}
</script>
<td align="left" style="<?=$bstyle?> padding-left: 10px; padding-right: 10px;" width="<?=$sizer?>%" onmouseover="javascript:showDiv('<?=$value["showDiv"]?>');" valign="top">
I would really appreciate it if someone can just point me into the right direction. Thanks Hey, I'm new to javascript, and I know there are a lot of tutorials out there. My only problem is that i'm finding it difficult to integrate stuff from different tutorials together. Basically, I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears. I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to. is this possible? any help would be much appreciated. http://www.jamesbutterworth.co.uk/untitled-1.html |
|||||||