JavaScript - Display Hidden Div From Inside Php Echo
I have a display hidden div code that works great, as seen:
Code: <a href="javascript:InsertContent('login-popdown');>Login</a> but the problem is that when I put this in a PHP echo, like so PHP Code: // retrieve the session information $u = $_SESSION['username']; $uid = $_SESSION['loginid']; // display the user box echo " <span class='toplinks'><a href='javascript:InsertContent('login-popdown');'>Log In</a> - <a href='http://www.tomhilsee.com/ipool/system/register.php'>Register</a></span>"; the javascript does not work because the ' interferes I'm assuming. So is there a way to accomplish the show/hide without using some sort of code that would interfere with the php echo? Similar Tutorialsok, so i am working on this site www.davidmolnarphotography.com/blog i am trying to display the image description at the top of the page. i have accomplished this by using this code: Code: <div id="info_wrapper"> <div id="info_content"> <h6 class="cufon"><div id="info"><?php echo $all_photo_arr[0]->post_content; ?></div></h6> </div> </div> it works great! but it dosent switch when i switch the images ;( so i added this to the javascript that switches the pictures. Code: //switch image function SwitchImage(img){ $jpreloader.fadeIn("fast"); //show preloader var theNewImg = new Image(); theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload); theNewImg.src = img; document.getElementById("info").innerHTML= "<?php echo $all_photo_arr[0]->post_content; ?>" ; } it didnt work. if i replace "<?php echo $all_photo_arr[0]->post_content; ?>" with "img" it will pull the image url and switch but i cant figure out how to get the description ps... did i mention this is in wordpress I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?
Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <LINK rel="stylesheet" type="text/css" href="<?php $path = $_SERVER['DOCUMENT_ROOT']; $path .= "/php/fleet/includes/website.php"; include_once($path); ?>/php/font.css"></style> </head> <body> <script type="text/javascript"> var showndiv=false; function show() { document.getElementById('fleet1').innerHTML=""; if (showndiv){document.getElementById(showndiv).style.display = 'none'; } theval=Number(document.getElementById('tb').value); switch (theval){ case 120: showndiv='fleet2' break; case 121: showndiv='fleet3' break; case 122: showndiv='fleet4' break; default: document.getElementById('fleet1').innerHTML="Sorry, nothing found" return; } document.getElementById(showndiv).style.display = 'block'; } </script> <script type="text/javascript"> ///////////////////////////////////////////////////// // Between the quotation marks, list the id values of each div. var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4"; ///////////////////////////////////////////////////// IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," "); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," "); var IDlist = IDvaluesOfEachDiv.split(" "); function ShowAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = ""; } } function HideAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = "none"; } } </script> <form name="myForm"> <input type="text" id="tb"> <input type="button" value="Search" onclick="show()"> </form> <div id="fleet1" style="display:block"> </div> <div id="fleet2" style="display:none" class="fleetdiv"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W599 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table> <table align="right"> <TR> <TD> <a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr> </table> <div id="fleet3" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W601 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> <div id="fleet4" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">122</FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W602 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> </body> </html> http://nctfleetlist.co.uk/div3.php I'm having a problem using javascript with a form. I'm using javascript to determine whether or not a person has selected "yes" or "no" from the select list. If "yes" is selected, the form is supposed to slide down and reveal two more fields. If "no" is selected, the form is supposed to slide back up hiding those two fields again. When "yes" is selected, the form displays the two new fields properly. In Safari, it does the slideDown animation, yet in Firefox, the new form fields just suddenly display. If I select "no" again, nothing happens. The slideUp animation doesn't play. So currently I am having to use $("#parent1").hide(); to get the "no" to trigger. So my two questions a 1. Is there any reason the slide animation plays smoothly in Safari but not in Firefox? 2. Why won't $("#parent1").slideUp("fast"); work when I select "no?" http://megandmatt.fernandwilbur.com/rsvp.php Any help would be greatly appreciated. I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!=""); That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()"> </body> <div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;"> <img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/> Loading... </div> </html> formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out. Basically we need to find a word which is inside a class and display a link. So something like this find a word equal to "1 line custom" then display this <a href="/1-line-custom.htm">click here</a> I'm not sure if this is really simple or not. Any help would be much appreciated. Thanks Will Hi, Apologies in advance but I have no experience of Javascript. I found the following 'Cut & Paste Google Internal Site Search script' in the Javascriptkit.com library - it works well and provides an easy solution for adding a search function to a website - code below Code: <script type="text/javascript"> // Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use //Enter domain of site to search. var domainroot="www.javascriptkit.com" function Gsitesearch(curobj){ curobj.q.value="site:"+domainroot+" "+curobj.qfront.value } </script> <form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)"> <p>Search JavaScript Kit:<br /> <input name="q" type="hidden" /> <input name="qfront" type="text" style="width: 180px" />*<input type="submit" value="Search" /></p> </form> <p style="font: normal 11px Arial">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p> However, if possible, I would like to display the results inside the website structure rather than on a new page - is there an easy way to do this? Thanks in advance for any help. Hey guys! How are ya? Gettin' right to the point, I need a help! I already created a javascript code to hide my div when click on close "[x]". What I need to do is get it movin' around the website here's the code: it's between <head></head> Code: <script language=javascript type='text/javascript'> function hidediv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideShow').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideShow.visibility = 'hidden'; } else { // IE 4 document.all.hideShow.style.visibility = 'hidden'; } } } function showdiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideShow').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideShow.visibility = 'visible'; } else { // IE 4 document.all.hideShow.style.visibility = 'visible'; } } } </script> and it's between <body></body> Code: <div id="hideShow"> <img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div> and it's in CSS Code: #hideShow { position:absolute; margin: 300px 110px; } thx! Need to append a hidden value to a floating div that is made via javascript. I tried the most obvious way but I am getting mismatch error in debug. .HTML Code: <input type="hidden" id="desc1" value="blah blah blah" /> .JS Code: var item; var image; var description; function one(){ item = document.getElementById("product1"); image = document.getElementById("i1"); description = document.getElementById("desc1"); expand(); } function expand() { //changes css of the div item.innerHTML = ""; item.style.position = "absolute"; item.style.top = "27%"; item.style.left = "21.3%"; item.style.width = "952px"; item.style.height = "610px"; item.appendChild(image); image.height = "300"; image.width = "400"; image.align = "left"; image.id = "cenimage"; ifrm = document.createElement("IFRAME"); ifrm.setAttribute("src", "form.html"); ifrm.setAttribute("frameborder", "0"); ifrm.setAttribute("scrolling", "no"); ifrm.style.width = 950+"px"; ifrm.style.height = 300+"px"; item.appendChild(ifrm); // mismatch error !! var x = description.value; item.appendChild(x); } Hi all I believe this to be a JS quesiton, but perhaps there is something here of CSS too? I have an "ecard" which is: - a <div id="outer_ecard"> wrapping an <iframe>... - is hidden by default (via a JS function that fires onload of the parent doc), .. - that gets its display and visibility turned on when the user clicks a link in the parent doc, ... - and then gets its display and visibility turned off again via a call to that same JS function in the parent doc that hid it in the first place by default. here is just the relevant snip of the hiding JS function - Code: elementToSet.style.display = "none"; elementToSet.style.visibility = "hidden"; everything works fine, *BUT* this issue: after the <div> disappears (the 2nd time, when the above snip is triggered in the iframe's parent via an onload event in the iframe doc)... then hyperlinks (in the parent file) that are geographically positioned underneath the <div id="outer_ecard"> do not work (i.e. they still think the ecard div is sitting on top of them (z-index:1). Can anyone advise me here? I need the links underneath the ecard to behave as though that div was never there. Thanks! -Govinda After searching the web most of the day, nothing has resolved this issue: Code: <!-- ALERT IS NEVER HIT --> <html> <input type="hidden" id="info" name="info" value="testInformation"/> <script type="text/javascript"> var me = document.getElementById('info').value; alert(me); </script> </html> Code: <!-- ALERT SAYS "null" --> <html> <input type="hidden" id="info" name="info" value="testInformation"/> <script type="text/javascript"> var me = document.getElementById('info'); alert(me); </script> </html> Code: <!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN --> <html> <input type="text" id="info" name="info" value="testInformation"/> <script type="text/javascript"> var me = document.getElementById('info').value; alert(me); </script> </html> Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method. Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source". For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on? http://www.lightsamerica.com/metro/s...mber:SL9469-8; I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas? Thanks for your time, -Scott hello, This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that. here is my current function. function closeDirections(){ gdir.clear(); if(document.getElementById("river").style.display="none"){ map.setZoom(16); hideID('river'); showID('main'); } if(document.getElementById("main").style.display="none"){ map.setZoom(12); hideID('main'); showID('river'); } } Also here is a link to my map, just in case. map I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if". I thought to rememdy this issue by using if/else...same issue. The only thing I could think is a nested if statements, but I am not sure what to use as a parent if. I have searched for a while, but cannot seem to find something like an .is_hidden(). Something that I could see if its true/false. Any help would be very much appreciated. I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter. Is there something I can add to the script to force it on top of every other object on the page? What did I do wrong? I would like to have an anchor link with hidden text. When I click on the anchor link, I want to see a text drop below showing the Keep trying information. It keeps giving me "object expected" error message. What object I need to put in there. Thanks. Here is the code: Code: <body> <a href="#" onclick="showDiv('divFundamentals');return false;">Javascript Fundamentals</a> <div id="divFundamentals" style="display:none;"> Basic - Javascript Keep trying: Keep trying - Try hard 1 - Try hard 2 - Try hard 3 - Try hard 4 - Try hard 5 </div> <script> function showDiv(id) { $('#' + id).show(); } </script> </body> Hey Guys, I have the following hidden field within a form: Code: <input type="hidden" name="test12" value="test12" /> I also have the following function which does something if that field exists: Code: if(document.formName.test12.value == "thisdata") { //do something } The problem I'm having is that if the hidden field doesn't display (which based on conditional logic, sometimes happens), a JS error is thrown on the page. What is the best way to carry out this check effectively without throwing an error if the field does not exist? Thanks in advance. My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below. Source: By clicking the info or photo tabs you will see the toggle for hidden divs Code for my tabs: PHP Code: <?php if( $page <= 1 and !$public ) { ?> <div id="mngl-profile-tab-control"> <ul> <li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li> <li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li> <li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li> <li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li> <li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li> <li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li> </ul> </div> <?php } ?> Code for one of the tabs content. The class mngl-hidden is just a display:none PHP Code: <div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden"> <div style="color:#171717; font-weight:bold;"><?php echo $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div> <?php //require_once(MNGL_MODELS_PATH . "/MnglUser.php"); foreach ($fav_posts as $fav_post) { $author = MnglUser::get_stored_profile_by_id($fav_post->author_id); $owner = MnglUser::get_stored_profile_by_id($fav_post->owner_id); if($author and $owner) $this->display_board_post($fav_post,$public); } /*$this->display_board_post('5705',$public);*/ //echo count($fav_posts).'--'.$page_size; ?> <?php if( count($fav_posts) >= $page_size ) { ?> <!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>--> <?php } ?> </div> Javascript that Sets Active Tab Code: function mngl_set_active_tab( tab ) { jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab'); jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab'); jQuery('.mngl-profile-tab').hide(); if((tab != 'board') && (tab != 'fav')){ jQuery('.mngl-board-post').hide(); } else { jQuery('.mngl-board-post').show(); } jQuery('#mngl-' + tab + '-tab').show(); } I have a simple script connect to a radio button. Based on which option, the matching div appears with a text box - and one with a radio button. If they change their mind and click another radio button, it'll switch to the new div, but keep the content in the old. How do I clear that out? I looked for a snippet, but they're all for clearing default text in a field when you click it. I want something a little different. Here's what I'm using: Code: <script> $(document).ready(function() { $("div.desc").hide(); $("input[name$='hear']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#" + test).show(); }); }); </script> <input type="radio" name="hear" value="dcranch"> DC Ranch Community <br /> <input type="radio" name="hear" value="friend"> From a friend <br /> <div style="display: none;" id="dcranch" class="desc"> <input type="checkbox" value="Yes" name="resident" /> If so, are you a DC Ranch resident? )</div><br /> <div style="display: none;" id="friend" class="desc"> Name? <input type="text" name="how1" /></div><br /> Hi everyone, was wondering if someone would be able to help me out, and correct this, or suggest an alternative. I have hidden divs, and I have achieved easily and simply this with the following, but on click I want the other divs to hide so that they all can't be displayed at once, at the moment they just stack up on top of each other. I'm trying to keep it as simple as possible as i'm much the novice Code: <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } } </script> and then <a href="#" onclick="showhide('divname'); return(false);"> Thanks in advance Good morning, On my website I want a centered popup where you can fill in a webform. Ofcourse I want to use a table for it so it can have a nice layout. However when I use a "div" which I can show or hide via a Javascript (showhide) and I put a table in that div, then the webform in that table is already show on the upper left side of my website. If I click the link to show the div, only a blank div will appear in the center of my screen. This is the code I used: <script type="text/javascript"> function showhide(id) { if (document.getElementById(id).style.display == 'block') { document.getElementById(id).style.display='none'; } else { document.getElementById(id).style.display='block'; } } </script> <div id="test" style="display:none; position: absolute; width: 600px; height: 300px; display: none; background: url('tableupperleft.bmp') repeat-x; border: 1px solid #000; left: 50%; margin-left: -300px; top: 50%; margin-top: -150px;"> <table> <tr> <td align="center">TEST</td> </tr> </table> </div> <a href="javascript:showhide('test')"><img src="iconadd.bmp"></a> In this case the word "TEST" will appear in the upperleft of my screen while the div is hidden. If I click the link, a blank div will appear in the center of the screen. If I don't use a table, bu only the word "TEST", then all works fine like it supposed to be. So I guess the issue is the <table>-function? What am I doing wrong? |