JavaScript - Displaying Box With Expanded Definition On Click
I have pairs of terms and short definitions in a table. I want to display a longer definition in a box below the terms table when the term is clicked on. The box needs to disappear if clicked on. I know very little javascript and would appreciate any help I can get. here is what i've got so far(no much)
[CODE] <body> <script type="text/javascript"> function displayBox() { //code that will display a longer definition of the term clicked on //The definition should be displayed below the table in a <div> tag. // I would like the box to disappear if clicked on. } </script> <table cellpadding="5" cellspacing="5"> <tbody> <tr id="term1" onclick=displayBox()> <td> Term 1 </td> <td> Short definition of Term 1 Here.</td> </tr> <tr id="term2" onclick=displayBox()> <td> Term 2 </td> <td> Short definition of Term 2 Here.</td> </tr> <tr id="term3" onclick=displayBox()> <td> Term 3 </td> <td> Short definition of Term 3 Here.</td> </tr> <tr id="term4" onclick=displayBox()> <td> Term 4 </td> <td> Short definition of Term 4 Here.</td> </tr> </tbody> </table> </body> [code] Similar TutorialsAhoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hey guys, Im creating a javascript content expander and would like to know how to create it so it changed the image from an down arrows to open the box, and a down arrow to close the box. Here is my current code. Code: <script type="text/javascript"> //var persistmenu="yes" var persisttype="sitewide" if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> <style type="text/css"> .sectionHeadernews .plaquenews { background: url(../layout/section_header_plaque_medium.png) center no-repeat; } .sectionHeadernews .plaquenews, .sectionHeaderchat .plaque_medium, .sectionHeaderchat .plaque_large { height: 26px; text-align:center overflow: hidden; line-height: 25px; font-size: 14px; font-family: Palatino Linotype, Book Antiqua, Palatino, Times New Roman, Times, serif; font-weight: bold; font-variant: small-caps; color: #30291f; } .sectionHeadernews { background: #bd9c5a url(../layout/section_header_bg.png) top repeat-x; width: 754px; } .sectionHeadernews .leftnews { background: url(../layout/section_header_left_news.png) left no-repeat; } .sectionHeadernews .rightnews { background: url(../layout/section_header_right_news.png) right no-repeat; } </style> <div class="sectionHeadernews"> <div class="leftnews"> <div class="rightnews" onclick="SwitchMenu('sub1')" > <div class="plaquenews"> Click to view current website news </div> </div> </div> </div> I want the <div class="rightnews"> thing to change from an up arrow to a down arrow. Here are the icons im using. For the box to contract: for the box to expand. If someone could help me out by adding the code so the images switch would be great! Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/ Code: <script type="text/javascript"> // <![CDATA[ // show the popup function show_popup(UserID) { if(http_getuser) { //get user data and show popup sendRequest(UserID); } } // hide the popup function close_popup() { document.getElementById('popup').style.display='none'; } // Make the request function createRequestObject() { if(window.XMLHttpRequest){ ro = new XMLHttpRequest(); } else if(window.ActiveXObject) { ro = new ActiveXObject("Msxml2.XMLHTTP"); if(!ro) { ro = new ActiveXObject("Microsoft.XMLHTTP"); } } return ro; } //Create Request Variables var http_getuser = createRequestObject(); //Send Request for user info function sendRequest(UserID) { var userinfo_url = '{AJAX_USERINFO_PATH}'; http_getuser.open('get', userinfo_url.replace('USERID', UserID)); http_getuser.onreadystatechange = handleResponse; http_getuser.send(null); } // fill in the response function handleResponse() { if(http_getuser.readyState == 4 ){ var xmlDoc = http_getuser.responseXML; if(xmlDoc.hasChildNodes()) { document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue; document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue; document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue; document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue; document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue; document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue; document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue; document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue; //document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue; //Apply style which makes profile info visible document.getElementById('popup').style.display='block'; //Get height of popup var getRefById = function() {return null;}; if(document.getElementById) { getRefById = function(i) {return document.getElementById(i);}; } else if(document.all) { getRefById = function(i) {return document.all[i] || null;}; } var d = getRefById('popup'), h = '0px', o; if(d) { if((o = document.defaultView) && o.getComputedStyle) { h = o.getComputedStyle(d, null).height; } else if('number' == typeof d.offsetHeight) { h = d.offsetHeight + 'px'; } } // 'h' should now contain the height of 'myDiv', or 0px //alert(h); //make room for popup document.getElementById('test').style.height= h; } } } // set popup to mouse possition function set_div_to_mouse(e) { //Make x and y cord vars var docX, docY; //get page info if(e) { if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;} else {docX = e.clientX; docY = e.clientY;} //vert } else { e = window.event; docX = e.clientX; docY = e.clientY; if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop; } else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) { docX += document.body.scrollLeft; docY += document.body.scrollTop; } } //hor if (docX > document.body.offsetWidth - 400) { document.getElementById('popup').style.left = (docX - 350) + "px"; } else { document.getElementById('popup').style.left = (docX - 5) + "px"; } document.getElementById('popup').style.top = (docY + 30) + "px"; } //document.onmousemove = set_div_to_mouse; // ]]> </script> <div id="test"> <div class="forabg" id="popup" style="width: 90%;"> <div class="inner"> <span class="corners-top"><span></span></span> <ul class="topiclist fullwidth"> <li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li> </ul> <ul class="topiclist forums"> <li><dl> <dd style="width:100%"> <table> <tr> <td><div id="ajax_avatar"></div></td> <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br /> <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br /> <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br /> <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br /> <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br /> <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br /> <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/> <span id="ajax_add"></span> </tr> </table> <br/ style="clear: both;"> </dd> </dl></li> </ul> <span class="corners-bottom"><span></span></span> </div> </div> </div> When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content? Hope you can help. I'm currently building a website and trying to integrate a javascript image 'tranisition' effect into mm_swapimage and failing. My knowledge of Javascipt is limited but without knowing the 'arguments' for mm_swapimage, it's impossible (looks similar to vb, but can't find an answer anywhere) I want the effect to work on a 'timed' event rather than 'OnMouseOver' so have added script to change that (which is probably the issue!) I can get both to work idependantly but not together. I've simplified the page and pasted the code below, as it stands the 'effect' works, but it only uses the primary image, not the other image in the array. I'm using DW CS4 and the transition extension is called FlevOOware. Thanks Michael 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>Untitled Document</title> <script type="text/javascript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function flvFSTI4(){//v1.01 this.style.filter="";} function flvFSTI3(v1,v2){//v1.01 var v3;if (v1.filters[0]&&v1.filters[0].status==2){v1.filters[0].Stop();}if (v2==0){v3="blendTrans(Duration="+v1.STI8+")";}else {v3="revealTrans(Duration="+v1.STI8+",Transition="+(v2-1)+")";}v1.style.filter=v3;} // Wipe Right Out function flvFSTI2(){//v1.01 var v1,v2=document,v3=v2.STI4,v4;for (v4=0;v3&&v4<v3.length&&(v1=v3[v4])&&v1.STI5;v4++){if (v1.filters&&!v2.STI7){flvFSTI3(v1,v1.STI3);v1.filters[0].Apply();}v1.src=v1.STI5;if (v1.filters&&!v2.STI7){v1.filters[0].Play();}}} // Wipe Right In function flvFSTI1(){//v1.01 // Copyright 2003, Marja Ribbers-de Vroed, FlevOOware (www.STI1.nl/dreamweaver/) var v1=arguments,v2=document,v3;v2.STI4=new Array();v2.STI7=(navigator.userAgent.toLowerCase().indexOf("mac")!=-1);for (var v4=0;v4<v1.length-2;v4+=5){v3=MM_findObj(v1[v4]);if (v3){v3.STI5=v3.src;v3.STI6=v1[v4+1];v3.STI2=v1[v4+2];v3.STI3=v1[v4+3];v3.STI8=v1[v4+4];v2.STI4[v2.STI4.length]=v3;if (v3.filters&&!v2.STI7){flvFSTI3(v3,v3.STI2);v3.onfilterchange=flvFSTI4;v3.filters[0].Apply();}v3.src=v3.STI6;if (v3.filters&&!v2.STI7){v3.filters[0].Play();}}}} function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } // Comma separated list of images to rotate var imgs = new Array('images/DSCN1209.jpg','images/DSCN1210.jpg'); // delay in milliseconds between image swaps 1000 = 1 second var delay = 5000; var counter = 0; function preloadImgs(){ for(var i=0;i<imgs.length;i++){ MM_preloadImages(imgs[i]); } } function randomImages(){ if(counter == (imgs.length)){ counter = 0; } MM_swapImage (flvFSTI1('slider', '',7,7,1,1, imgs[counter++])); setTimeout('randomImages()', delay); MM_swapImgRestore (flvFSTI2('slider', '')); } //--> </script> </head> <body onload="preloadImgs();randomImages();"> <img src="images/DSCN1209.jpg" name="slider" width="500" height="322" id="Image1"/> </body> </html> There is an effect I would like to do but I don't know how it is done. To see something like it go to: http://www.schillmania.com/ then mouseover the right side items under "most recently". It seems like there is a dt link which when mouseover occurs the dd data is presented. Any ideas on how it is done? I am trying to create a page that uses javascript to call data from an xml file to present a large quantity of information through an for loop. I have gotten the id of the element to work appropriately, but using the funtion defines it as the last cycled variable definition. Is there a way to pass the value of the variable to the function definition, ie.. onclick="function(var)", so that it stays that value when the loop cycles back through? Code: <script type="text/javascript"> xmlhttp.open("GET","companyInfo.xml",false); xmlhttp.send(); var xmlDoc=xmlhttp.responseXML; var x=xmlDoc.getElementsByTagName("entry"); var idVar; for (var i=0;i<x.length;i++) { idVar=x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue; document.write("<button class='headerBar' onclick='showInfo(idVar)'><strong>"); document.write(x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue); document.write("<strong></button>"); document.write("<span id='x' onclick='hideInfo(this.id)' style='display:inline;'>"); document.getElementById("x").id=idVar; document.write(x[i].getElementsByTagName("page1")[0].childNodes[0].nodeValue); document.write("</span>"); } </script> Thanks in advance to anyone that can help with this. Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head> <script> function autoClick(){ document.getElementById('linkToClick').click(); } </head> <body onload="setTimeout('autoClick();',3000);"> <a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a> </body> It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code: <style type="text/css" media="screen"> #wrapper { background: url('_assets/images/sun-inactive.p') no-repeat #777eee; width: 470px; margin: 0 auto; } a#sun{ background: url('_assets/images/sun-inactive.png') no-repeat; width: 107px; height: 78px; display:block; padding: 20px 10px; float: left; } a#sun:hover, a#sun.active { background: url('_assets/images/sun.png') no-repeat; width: 107px; height: 78px; display:block; padding: 20px 10px; } a#plane { background: url('_assets/images/plane-inactive.png') no-repeat; width: 107px; height: 78px; display:block; padding: 20px 10px; float: left; } a#plane:hover, a#plane.active { background: url('_assets/images/plane.png') no-repeat; width: 107px; height: 78px; display:block; padding: 20px 10px; } a#nano { background: url('_assets/images/nano-inactive.png') no-repeat; width: 107px; height: 78px; display:block; padding: 20px 10px; float: left; } a#nano:hover, a#nano.active { background: url('_assets/images/nano.png') no-repeat; width: 107px; height: 78px; display:block; padding: 20px 10px; } #popuptext { float: left; margin: -30px 0 0 0; padding: 0 0 0 0px; font-size: 11px; } #popuptext a { color: #ff6600; padding: 0 30px; } </style> </head> <body> <div id="wrapper"> <div id="navigation"> <a id="sun" href="#"></a> <a id="plane" href="#"></a> <a id="nano" href="#"></a> </div> <div style="clear:both"></div> <div id="popuptext">1st: <a href="#">Sun</a> 2nd: <a href="#">Airplane</a> 3rd: <a href="#">Nano</a> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { // target each link in the navigation div $('#navigation a').click(function() { // link that you clicked clicked = $(this).attr('id'); // make sure that all the others are not active // except for the clicked one $('#navigation a').each(function() { if ($(this).attr('id') == clicked) { $(this).addClass('active'); } else { $(this).removeClass('active'); } }); // prevent the default link action return false; }); }); </script> What jquery or javascript code do I need to do this? thanks, chaser Hello, I am creating a website and want to put in a "Feedjit" paid for map. Code: <script type="text/javascript" src="http://feedjit.com/map/?wid=f362a5317ac1d91f&pid=e71759d0ce545166&bc=FFFFFF&tc=494949&brd1=336699&lnk=494949&hc=336699&dot=FF0000&wh=Recent%20Visitors&hl=1&wh=Recent%20Visitors&hl=0"></script> . How do I stop it being clicked through - ie, I do not want when people click on the map for it to be clickable - the website is "here" and the "widget" is entitled "Map Test" - I have tried contacting the company but no response yet. Thank you. Philip. How can I use onclick with the <div> tag?
How would you specify when user right clicks?
Hello, Thanks for reading. This is my first post, I hope it's not too stupid. Should I disable the right click option or not? I have a gallery site, I don't want people to be able to copy the images with the default right click over an image. From a professional looking site point of view I suppose I would be messing with the functionality a bit too much, OR is it OK in this instance to disable the click. I know how to write the code to disable the click, but what I was thinking was maybe it would be better to leave the right click but change the menu options? I'm not sure how to change the menu options, any suggestions would be appreciated Here is a link to the site. http://www.thephotographbox.com/?ID=3 (It's still in the early stages on development) Thanks for any advice. Derek. i have a table with 28 columns in a page with horizontal scroll bar i need to display a div when a header cell is clicked but the div shld be displayed at the location of the header clicked header cell only currently i have a script to get the mouse click coordinates & have applied to div left but the problem is even if the table is scrolled the div remians there only . it needs to be in the header cell where its clicked suppose i scroll & click another header cell i do get the cordinates but its the screen cordinates so not matching the actual headercell cordinates Dear Friends, please give your solution about below problem. I call function test".$i."(){ edit($('$paket_id')); } function for editing in line text. <div onclick="test".$i."(this)"><img src="./images/edit01.png"></div> http://www.freeimagehosting.net/l5raa But when I click to call link, the textarea are opening again. How I can limit this? Hello Friends, I would like to get a div to show when a button has been clicked. I would like the div to be hidden when the page loads, and only to show when the button has been clicked. The button works - it hides and shows the div when clicked - but the div shows when the page loads when I want it to be hidden. This is the code I have: Code: <script language="JavaScript"> function setVisibility(id) { if(document.getElementById('bt1').value=='Cancel'){ document.getElementById('bt1').value = 'Change Currency'; document.getElementById(id).style.display = 'none'; }else{ document.getElementById('bt1').value = 'Cancel'; document.getElementById(id).style.display = 'inline'; } } </script> Body: Code: <div id="currency"><input type=button name=type id='bt1' value='Change Currrency' onclick="setVisibility('sub3');";> </div> I am still learning Javascript, any advice would be greatly appreciated. Thank you. hello! I currently have 2 UL's that get slide down when you click a button (used for navigation). I currently have it set up so that when you click the "ul#selectService" they slide down, and when you click it a second time it will slide back up and disappear. However, they only way to get the UL's to disappear is to click the "ul#selectService" a second time, so I'm trying to get it set up so that when you click on anything that isn't the UL's it will cause it to slide back up again. i currently have been working on a starting idea to show what I'm basically trying to do so that you can get a rough estimate of my goal: This is my HTML that i'm using: Code: <ul id="selectService"> <li></li> <li></li> <li></li> </ul> <ul id="secondHalf"> <li></li> <li></li> <li></li> </ul> Code: var $box = $('#selectService'); $("*:not(#serviceSelect)").click(function(){ if (!$box.has(this).length) { // if the click was not within $box $('#selectService').hide(); $('#secondHalf).hide(); } }); Right now nothing is happening when i click out of the UL any thoughts? anyone can help me?? Code: var milisec=0 document.d.d2.value='0' function display(){ if (milisec>=9){ location.replace('javascript:chresp(1,0)'); // i want to doing auto click to this link -> javascript:chresp(1,0) } else milisec+=1 document.d.d2.value=milisec setTimeout("display()",1000) } display() Hey guys, so i have a small problem. I have a comment area on my site. And i have the comments set to a specific height, so it only shows so much text. And i have a "read more ..." button How would i make it so that when I click the read more button. The CSS for the comment div changes to height:auto; This is what i currently have, and its not working. CSS Code: .tag_desc { clear:both; height:30px; overflow:hidden; } HTML Code: <div class="tag_read_more"><a onclick="document.getElementsByClassName('tag_desc').style.height = 'auto';">Read more ...</a></div> Thanks in advance !! |