Saving Visible Or Hidden State As Variable On Click?
Jul 22, 2010
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 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 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?
i have used it for creating a table with Sorting and Paging. The table works perfectly without any issues per se except what i need now. I have used the following files: jquery-1.3.2.js, JQtable.js, and jquery.tablesorter.pager.js.
My problem is that there are links in 1 column of the grid. If a user clicks on the link, the user is redirected to another page. But when the user clicks on Back button, the Jquery Table always loads on the 1st Page with default settings and does not load the page on which the row wa present.
i need to go back to the same page of the table (from where the link has been clicked) with the same size for paging and sort order on clicking Back or a Link to the Page.
So in short - is there any pugin which we can use witht the jquery table to save the state and use it to load the table accordingly on Page Load?
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:
I have a page with a simple form: 3 hidden fields and 3 selects. I load the data for the first select via Ajax on domready. I have "change" event handlers for all 3 fields. If I select something in the first select, the corresponding data gets loaded into the second select via Ajax etc. So it's a "cascade" of selects. When an option in the 3rd select is being selected, I save the values of all 3 selected options in the hidden fields, and create a button for submitting the form. Until here everything works fine. When a users hits the submit button, he is being forwarded to a results page. Now, when the user hits the back button, and the page with the form gets loaded again, I check if the first hidden field has a value. If so, I try to fill all the form fields with the values the user had entered (i.e. the selections he made), which means I make 3 Ajax calls (to have all the data available), and mark the options the user had selected as selected. That works fine in FF 3 and 3.5, Safari 4, as well as IE 7 right now. IE 6 only display the data of the first select (as if the other two Ajax calls aren't successful or something - no errors though), while Opera 9 doesn't seem to remember the values of the 3 hidden fields (same issue with IE 8, but I'm using IE Tester, which is not always reliable). The html and jquery code (leaving out all the details) look like this:
I am currently working on a page that has a series of <div> tags that .show and .hide whencorrespondinglinks are clicked, the first <div> is visible when you load the page. When you leave the page and return to it, the page reloads and the the first <div> is visible. Is there any way for the browser to save the current <div> that is visible to stay visible when you return to the page?example of what I am trying to accomplish:I load a page and click on the third link to show the third <div> and then after leaving and returning to the page (by clicking the browsers back button) the third <div> is still visible, rather than returning to the original state of the page where the first <div> is visible.
I have this code for collapsing div below. What I want to achieve is that when I go back to the page, it would remember whether the div was collapsed(style.display = none) or expanded(style.display = block). Here is the collapse/expand script:
Code: <script type="text/javascript"> function toggleDiv(div){[code]....
When you select multiple <div> get the value of each one and save in separate hidden fields accordingly.
What needs to happen is. Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2
Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Here's what I've come up with so far (currently I'm using JQuery)
The problem with this is that no matter what div I click in which order it only updates the 1st hidden field :(
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"
Im modifying some open source code and in this instance I would like to write some data to a file (possibly for the user to download). In this code the user can toggle the hidden exportData to be shown on the webpage. However, I would like to give the option of downloading/saving the data as a file (only the exportData which I believe is the document.getElementById("path")). I have tried various tricks found online, but have yet to produce the hoped for result.
What I want to do is have the div appear as if it is sliding in, instead of just appearing (similar to WindowsXP effect). If this isn't possible, is it possible to just "slide" the content that's below the div down by setting the height of the div to 0, set it to display but not visible, and then use js to gradually increase it's height, and then display?
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?
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'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 unsure what is going on with my website? I had flash on it, and I have removed the flash and installed javascript. Everything is installed correctly from what I can see, when I go to the view page button on Dreamweaver the images rotate. When I upload it to my server they stop rotating.I have download all of the files needed for this to work, and have added them all to my server. Here is a copy of the coding.
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?
The left hand layers make one right hand layer visible via onMouseOverIf one of the list boxes is clicked the drop-down list appears as per "select" function.it stays visible until any part of the window is clicked again. This makes clicking a bit more laborious when changing to the next listbox.BUT if the layer is switched (by hovering over a different onMouseOver position) the visible drop-down list remains visible until the window is clicked again.I can't see any attribute/parameter that will hide this list in JavaScript.I can set the selectedindex when the list is clicked eg
Code: function sfm_goto(loc,obj5){ //v3.0 var obj10 = findObj(obj5);
'When my form is submitted, I have onsubmit pointed to the following code snippet. But, the button is not actually set to disabled and the style.visibility changes are not made for several seconds. It appears that it goes into validateForm and doing the rest of this snippet before the browser makes the changes.
How can I get the browser to immediately make the UI change?
function submitForm(servleturl) { var submitbuttonelem = document.getElementById("submit"); submitbuttonelem.disabled = true; document.getElementById("modgradeform").style.visibility="hidden"; var mydiv = document.getElementById("contentarea"); mydiv.innerHTML = "Validating the form."; mydiv.style.visibility="visible"; var ret = validateForm();
I have the following code inside the <head> of my php file. What this code will do is change the style="display:none;" of a div element, depending on which option is selected within a combo box. Code:
I have an Accordion working. To advance from section to section, I want to use both click on the Accordion bar or click a button in the section. This works so long as it is a straight pass through. (section=section+1). If the user goes back, out of sequence, to change a field in a prior section, things 'get out of whack'. I need some way to have a variable in the HTML (that does not show to the user) that identifies the Accordion section and pass it to the Accordion activate method. I currently have this in the HTML of each Accordion section.
I'm currently building a website that has a flash fullscreen popup at the beginning. The flash popup loads fullscreen, therefor I've set overflow-y to hidden. As soon as the flash popup is done, it removes the div it the flash is in using javascript, but I can't figure out how to put the overflow-y to visible.
I'm assuming I need to build a Javascript function to show overflow-y visible, and then need to call to that function from the flash file. I just can't figure out how to build the javascript function since I suck at javascript.
All the CSS is in the original file, so not in an external stylesheet, this needs to stay that way because I have to implement the code in to several different web sites.
