JavaScript - Help With Expanding/collapsing Div (from Dynamic Drive)
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 Similar TutorialsHi, 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. 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, I have been noticing a really cool trend on the web and it is called the javascript carousel. Not the one from dynamic Drive. Here is an example of what I am talking about; carousel http://food.yahoo.com/;_ylt=AtuShzEA...hz75HDg9VIY.Y5 check on the bottom of the page where it says "try these recipes" I just love the circle indicating how many "pages there are. Do you know where I can find the tutorial or script for this effect? Thanks, Creations_Kash Hello all! I hope everyone had a great Holiday I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? 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! 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.
I have an html file I've built with embedded Javascript (using ActiveX) that successfully reads a file on my local hard drive when I run the html file through my web browser (IE) locally. However, when I copy the html page up to a webserver and access it through the internet, it doesn't appear to be reading the local file. I'm assuming this can't be done because of security reasons? Am I correct in that? Is there any way using Javascript/ActiveX that you can get a webpage on the internet to access a file on the visitor's local drive? (other than cookies)
I would like to create collapsing boxes. I would like for them to have different colors. Box1 Box 3 Link 1 Link 1 Link 2 link 2 Link 3 Link 3 Box2 Box 4 Link 1 Link 1 Link 2 link 2 Link 3 Link 3 I got the code to do the first column (box 1 and 2). But I don't know how to add a second column (box 3 and 4). Any help would be appreciated. Thanks how do i make this table's initial state to be collapsed rather than expanded Code: <html xmlns="http://www.w3.org/1999/xhtml" > <head><title> Untitled Page </title> <script type="text/javascript"> function poorman_toggle(id) { var tr = document.getElementById(id); if (tr==null) { return; } var bExpand = tr.style.display == ''; tr.style.display = (bExpand ? 'none' : ''); } function poorman_changeimage(id, sMinus, sPlus) { var img = document.getElementById(id); if (img!=null) { var bExpand = img.src.indexOf(sPlus) >= 0; if (!bExpand) img.src = sPlus; else img.src = sMinus; } } function Toggle_trGrpHeader2() { poorman_changeimage('trGrpHeader2_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif'); poorman_toggle('row1'); poorman_toggle('row2'); poorman_toggle('row3'); } function Toggle_trGrpHeader1() { poorman_changeimage('trGrpHeader1_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif'); poorman_toggle('trRow1'); } function IMG1_onclick() { } function IMG2_onclick() { } function IMG8_onclick() { } function IMG10_onclick() { } function IMG12_onclick() { } function IMG13_onclick() { } </script> </head> <body style="font-size: 12pt"> <div> <table border="0" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; cursor: crosshair; padding-top: 0px; background-color: transparent; border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid;" cellpadding="1" cellspacing="0" align="center"> <tr> <td colspan="12" style="border-bottom: gray thin solid; text-align: center; height: 25px;" class="titlebg"> <span class="titlebg" style="color: gray">Our Affiliates</span></td> </tr> <tr id="trGrpHeader2"> <td class="number" colspan="4" rowspan="4" style="border-right: gray thin dashed;"> <span onclick="javascript:Toggle_trGrpHeader2();"> <img id="IMG12" src="http://img48.imageshack.us/img48/3168/viewallcopyjo5.png" language="javascript" onclick="return IMG12_onclick()" /></span></td> <td colspan="1" style="width: 71px; height: 11px;"><img id="Img5" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td> <td colspan="1" style="width: 63px; height: 11px;"><img src="http://sz-ex.com/affiliates/ff1.gif" /></td> <td colspan="1" style="width: 76px; height: 11px;"><img id="Img6" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td> <td colspan="1" style="width: 51px; height: 11px;"><img id="Img7" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td> <td colspan="1" style="width: 40px; height: 11px"> <img id="IMG8" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td> <td colspan="1" style="width: 55px; height: 11px"> <img id="IMG10" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td> <td class="number" rowspan="4"> </td> <td class="number" rowspan="4" style="width: 80px; text-align: center; border-left: gray thin dashed;"> <img id="IMG13" src="http://img61.imageshack.us/img61/613/minibanneruf1.gif" language="javascript" onclick="return IMG13_onclick()" start="" /><br /> <span style="font-size: 8pt; color: dimgray"></span></td> </tr> <tr id="row1"> <td class="number" rowspan="3" style="width: 71px; height: 22px"> <img src="http://sz-ex.com/affiliates/ff1.gif" /></td> <td class="number" rowspan="3" style="width: 63px; height: 22px"> <img id="IMG2" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td> <td class="number" rowspan="3" style="width: 76px; height: 22px"> <img id="Img11" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td> <td class="number" rowspan="3" style="width: 51px; height: 22px"> <img id="Img9" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td> <td class="number" rowspan="3" style="width: 40px; height: 22px"> <img id="Img4" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td> <td class="number" rowspan="3" style="width: 55px; height: 22px"> <img id="Img3" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td> </tr> <tr id="row2"> </tr> <tr id="row3"> </tr> </table> </div> </body> </html> Hello! I am trying to collapse a table via JS, and the following code works in IE, yet not in Mozilla. I have read lots of other posts (on the world wide web) in regards to possibly tackling this with div, or span: however, in my case, I cannot modify the already existing HTML of the code. Could you please assist me - why is it that the following code works in IE, yet not in Mozilla? More INFO: Please note that although I am using the variable id below, I have also tried this via the defined element el. However -- using el doesn't work in either browsers. Please also note that the function is being called like so: HTP.p( '<table BORDER=0 BORDERCOLOR="#d1dce9" CELLPADDING="0" WIDTH=100% style="border-collapse:collapse;"> <tr> <td onClick="ftoggle(this);" width="100%" style="cursorointer;"><font face="Calibri" color ="#3A5894" size=2><B>[+] Click here to Show/Hide the Table</B></font></td> </tr><tr> <td colspan="1" style="display:none;color:#ff0000;">'); <head> <script language="JavaScript"> function ftoggle(id){ var el = document.getElementById(id); if(id.parentNode.nextSibling.childNodes.item(0).style.display=="") { id.parentNode.nextSibling.childNodes.item(0).style.display="none"; } else { id.parentNode.nextSibling.childNodes.item(0).style.display=""; } } </script> </head>'); Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) { var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ; result = result.toFixed(2) ; result = addCommas(result) ; document.getElementById("total"+selected).innerHTML = result ; } The bit that adds a new row of fields is: Code: function addPart(divName){ var newdiv = document.createElement('div') ; newdiv.setAttribute('id', 'partrow' + counter) ; newdiv.setAttribute('style', 'clear:both;') ; newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ; document.getElementById(divName).appendChild(newdiv) ; counter++ ; } The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Ahoy, 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. Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options. I know the code will be straight forward, I can't work it out though. Thanks whoever can help = ) 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 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 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 Hi all, I am looking to create this in JS/DHTML/CSS that I found in a flash script you can view he http://www.melodicmedia.com/dev/expa...ash_flash.html I want the red expanding and contracting circle to be on top of a image so it only shows the parts of the image that the circle is around. Any help you have would be much appreciated =) Thank you =) Light and Love and Healing to you, -Patrick Arden McNally Hi. I am trying to learn how to make a Javascript menu for my webpage. I have made the menu and it works. I can collapse a submenu when I click on the menu header. I wan't it to start collapsed and then open a menu item when you click on it. I have figured out that it have something to do with the function Closeall(). But can't figure out what. Perhaps someone in here can help me or perhaps help me make a better menu. <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>IT-Menu</title> <script type="text/javascript" language="javascript1.3"> function closeall() { var divs=document.getElementsByTagName('div') for(var i=0; i<divs.length; i++) divs.style.display='none'; } function clicked(element) { var div=document.getElementById(element) if(div.style.display=='none') div.style.display='block'; else div.style.display='none'; return; } </script> </head> <body> <a href="#" onclick="clicked('MENU1')">MENU1</a><div id="MENU1"> <a href="#">SUBMENU1</a> <br /> <a href="#">SUBMENU2</a> </div> <br /> <a href="#" onclick="clicked('MENU2')">MENU2</a><div id="MENU2"> <a href="#">SUBMENU1</a> <br /> <a href="#">SUBMENU2</a> </div> </body> |