JQuery :: Make Div Panel Visible And Hidden AND Hide Div On Body Click
Apr 27, 2010
I have a div tag element and a hide/show button above it. I'm able to handle the hide show of the contents all right via the button, but I want the div to be hidden when someone clicks anywhere else in the document, save inside the div area itself.This functionality is similar to what you see on the sign on panel in twitter.com. Press the sign in, the div sign in panel displays. Press the sign in link OR anywhere else on the document outside the panel. The panel is hidden.What's the best way to script this functionality in jquery?
While I am new to javascript, I've programmed in a dozen other languages for decades, and now have been working in javascript intensively for several weeks. My first comment -- which has nothing to do with this problen -- is on how its richness makes it so difficult to provide adequate reference material. After working only with what I could discover through Google searches and actually writing some nifty fast incremental select element populating code -- what I found on the Web, which has been cited in many locations, is ugly code and sloooow when search a list of, say, 2000 possible entries for inclusion in the box -- just with those hints.
I finally broke down, bought what the reveiws say are the two most complete books -- Javascript Bible and Dynamic HTML, The Definitive Reference (both by Goodman), and am aghast: With the "Bonus Chapters" in the former, they total more than 3,000 pages! And with their in-depth indexes, it's still very difficult to find what one needs. (The HTML and CSS speification publications add another 400 pages . . ..) As a truly elementary example: I wanted to return from a function as a result of a test, not by running it out: The "return" is not indexed, nor are any of the words that might lead one to it. In fact, it is shown in some examples about 980 pages into the book, but nowhere is it actually documented. Yes, I know, every language has a "return" statement, but its usage and syntax varies -- and on some occasions, it's actually called something else.
So, to my current issue. For reasons that are valid -- please don't ask, "Why do you want to do that?" -- I need to hide the page in its entirety until the onload script has altered it based on certain criteria. After doing a lot of brute force stuff -- setting font color to "white", etc., etc. -- I discovered that one can put the attribute style="visibility:hidden" directly in the <body> tag -- which itself is not easily discovered. But: Tables in the body that have a non-zero "border" attribute still show -- just the borders!
Yes, I know I need to learn CSS as well; give me a break, guys! I do have that spec as an HTML doc, and it was there I finally found this out. You know, you can't look such things up by concept in the indexes of either book, or the HTML spec, or the CSS book, unless you already know the term that implements it; if I know the term, I don't need to look it up! In any case, try looking up "hidden" in either book; you get no hint that it can be applied via style to any element. If you know it's available as a style attribute, then know the attribute is "visibility", why than you can find it . . . and by that time, you must know enough that you don't need to find it. (Again, a Google Groups search on words associated with the concept told me what terms to use, and then I didn't need to use the book . . .)
I apologize for the rant (Fortran was good enough for my grandfather, it was good enough for my father, and it's good enough for me -- bah, humbug!), but it's been a very frustrating couple of weeks.
The real question: What about them table borders? So far, I'm defining their values as zero, then setting them to their final values at the same point that I make the body visible. Should I need to do all that? What should make that unnecessary?
I have a code below my concern being tht when the first text box "Name" conatins a value of "TPU" then the sexong text box "Ref Number" should be visible else should not be visible.
I mean the Whole <tr> shall be visible only if "Name = TPU"
I have a class hidden by default at the document ready state. I use the show() function when its parent has been clicked and I want to be able to apply a click function to this newly visible element - when I write it I am finding that it is overriding the initial hide(). How do I work around this? I should say that this element is just a bit of text that says "close x" and will be used to "close" its parent div down...
I'm not very good with javascript. My knowledge is very limited.
See, this code is going to check if a user has inputted an empty field or not. As of now, Im testing it on 'first name' text field. If the user didn't input anything (the text field is empty) and clicks submit, an asterisk will be displayed at the right side of the text field. The asterisk is only temporary. If the user clicks the text field or refreshes the page, the asterisk at will disappear.
I've googled it already and I've tried every technique I can find but I can't get this code to obey. code...
I am trying to save the state of visibility (hidden or visible) of a portlet as a variable so that It can be saved. Hopefully allowing the user to return to the page without having to toggle portlets open/close again.
My issue: Unable to correctly establish whether or not the clicked portlet is visible or hidden while assigning a variable to be used as post data to a database.
Here is the code so far
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head>
I am trying to get a simple set of Javascript tabs to work properly. I have just two tabs and I want to set up the script to have the second tab automatically hidden prior to reading the javascript code because right now it shows the contents of both tabs when the page is loading and then the second tab disappears after all the script has loaded.
I have the jquery script linked to on the page and here is the way my script looks to run the tabs:
Code:
I want to add something like style="visibility:hidden;" to the DIV that isn't shown on page load and have it added and removed as necessary when users click on the tabs. So basically I would like the generated code to look like this:
My goal is to be able to have a page with multiple hidden DIVs. On click of a link, a single DIV (box) should appear. Now, either on second click of that link, it should close OR on click of another link the first DIV should close and the second should open. At any one time, only one DIV (box) should be visible with the option to close DIVs by clicking a second time on the open link. I have only been able to get 2/3 the way there. I am able to click on a link and open it, click a second link which closes the first and opens the second, but I don't know how to close the last open link so that no DIVs are shown, as when the page originally loaded.
Here is my example code: <html> <head> <title>Hide DIV Test Run</title> <script language="javascript"> function show(selected) { var openDiv = document.getElementsByTagName("div"); for(var x=0; x<openDiv.length; x++) { name = openDiv[x].getAttribute("name"); if (name == 'openDiv') { if (openDiv[x].id == selected) { openDiv[x].style.display = 'block'; } else { openDiv[x].style.display = 'none'; }}}} </script> <style> body { width:50%; } #openDiv1 { display:none; border:solid 2px black; width:200px; } #openDiv2 { display:none; border:solid 2px black; width:200px; } </style> </head> <body> <div id="body"> <p>This is <a href="#" id="link1" onclick="show('openDiv1')">some</a> test text. Sentence #1. <div name="openDiv" ID="openDiv1">This is the hidden text.</div> <p>This is even <a href="#" id="link2" onclick="show('openDiv2')">more</a> text. Sentence #2 <div name="openDiv" ID="openDiv2">This is more hidden text.</div> </div> </body> </html>
I have the following code that don't work like i want it.
Code: function hideDisplaySingleSuite(textstring) { var myclass1 = new RegExp('\b'+textstring+'\b'); //Populate the array with all the page tags[code]....
For example.It show objects if I remove the if statement that checks if the class is visible.for example this shows a class and works.
Code: function hideDisplaySingleSuite(textstring) { var myclass1 = new RegExp('\b'+textstring+'\b'); //Populate the array with all the page tags[code]....
So my question is why don't this work on a class, it works on an "id"?
Code: if (allPageTags[i].style.display ==''){ allPageTags[i].style.display = 'none'; }[code]....
I want to show the class if its not visible or hide it if it is visible.How can this be done?
Using a UI dialog I'd like to load in 10 or so images. Each would be unique and after you click on one the following needs to happen:
1. Image appears on the parent page in a specified ID.
2. A "hidden" field is updated so that when the user submits the db is updated with their selection.
3. Dialog closes automatically.
That's it. Basically it would work similar to "datepicker".I'm using the latest 1.4 and ui and been making great progress as learning basics. I need to do the above and it seems like such a no brainier and or it should already exist but after 2 days of searching and trial and error...
I'm trying to make my body content scroll at the same time as an iframe located within the body. This has to do with the age old problem of mouse focus on iframes. When my mouse reaches the iframe and it takes over focus, I would like the body to keep scrolling until the iframe is right at the top of the screen. After that I want to relinquish focus to the iframe. I don't mind if the iframe starts scrolling as soon as the mouse reaches it, so long as the main body keeps scrolling for a while.
I have a tab panel which loads external content dependent on the chosen tab.
Due to space issues i would like the content to be expandable via show/hide functionality, however I can't seem to figure out a way to target the #expandpanel id within the tab panel when the tab panel content is loaded as an external page.
It works when its on its own page but when I place the code in a hidden div that becomes visible on click, it doesnt work.What do I do to get the cycle plugin working when 1 of the hidden div is visible?
example: [URL]... I want to create a button which will shrink/minimize to bottom when i click on it(instead of shrinking upward) problems encounter: I use the script given in the example to modify the code so instead of moving up , it will move down but the problem is the clickable button wouldn't go down together with the panel (a.k.a. which mean the button is floating in the middle of nowhere when i click on it. )
Is it possible to expand a table with DIV's using CSS hidden/visible? If I select an option from a select field in one row, to have a hidden select field appear in the row directly below, moving the contents directly below down a row? Expanding the table when a hidden row becomes visible. Or should I just use DIV's and forget about using the table format?
I wonder if it's possible to implement a menu like the one ofcbs.com?Basically, when mouse over some of the menu items, a menu panel shows up with a few columns of links. The many panel disappears when the mouse moves out. I think it's quite neat and I'm hoping to be able to do something like that with jQuery.
I have an image that I set to have a width of 100%. I want its height to be no greater than the visible height of the browser web-page area. This could distort the image, but thats OK. To makes things difficult, the image is in a div, and I want the div to be higher than the visible area. So I can't just set the div to height of 100%, and then within that set the image to a height of 100%. I know there is a javascript way of getting the height of the entire screen (screen.height) but that includes the extra areas of the browser such as toolbars etc. I know there is a 'offsetHeight' attribute, but I think I would have to use that on the BODY tag, and the BODY of the page could be several screens in height. So is there a solution to this? If there isn't then can I detect the aspect ratio of the screen?
I have an accordion list much like the example here : [URL]. Say for instance I have page links under the heading 'Section 2' of that demo above. How can I make it so that when you visit a page from these links 'Section 2' is visible and 'section 1' and 'section 3' are closed?
At the moment I have : $(document).ready(function(){ $("#accordion").accordion({ active: false, collapsible: true }); }); <!-- start accordian menu --> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div><ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul></div> <h3><a href="#">Section 2</a></h3> <div><ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul></div> <h3><a href="#">Section 3</a></h3> <div><ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul></div> <!-- end accordion menu --> </div> What I need to add to make 'Section 2" visible only?
I am having a simple textbox: <input id="myText" name="myText" type="text" visible="false" /> and a checkbox: <input name="myCheckbox" id="myCheckbox" type="checkbox" /> How can I make the textbox visible if the user select the checkbox?
