Showing/Hiding Now Working Correctly When Building Select List
Sep 15, 2009
I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed.
However for some reason it's not working correctly.. both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior.
What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown.
Here is the code I am using..
function searchCats(text) {
// Set URL for ajax request
var url = 'search_cats.php?search_text='+text;
// Set up element we're modifying
I have a form, what I want to happen is that a user clicks a checkbox and a list appears or is enabled so that the user can then select a option. Also when the checkbox is unchecked again, I want the list to disapear or become unabled and it's value set back to whatever was the default.
After a bit of looking around I thought I has done it, but no luck. Can anyone let me know whats going on here? Code:
Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.
Here's the code I've got for the Javascript: function typeoflisting() { var selectform = document.getElementById('propertytype'); if (selectform.options[selectedIndex].value == "sell") {
I am using the "jQuery UI Multiselect" from [URL] I need to have it inside a <div> set with "display: none;" from the start. The user then clicks a link and the <div> tag opens op.
The problem is that whenever I open the box the Multiselect does not show up correctly, it shows up as a 3pixel wide stick. You can see an example at: [URL]
i am having some problem showing and hiding some divi want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
function Show (titleImg){ // the id of the content element from the id of the title element var contentID = titleImg.id.replace (/title/, "content");
i am having some problem showing and hiding some div.i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
I was wondering if anyone wanted to take a shot at re-factoring my code. I am not a javascript guru, and I would like some feedback on what I could do to make it better.The code shows/hides the top div, and when the top div is hidden, the bottom div takes up the space of the top div.
I want to construct HTML for a menu and I want to use DIV with UL. The data for the link and text would be coming from a web service which is a sharepoint list like so. As you can see below I want to grab the rows and and it to anchor links... $(document).ready(function() { $().SPServices({ operation: "GetListItems", async: false, listName: "MenuList", CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>", completefunc: function (xData, Status) { $(xData.responseXML).find("[nodeName=z:row]").each(function() { var liHtml = $(this).attr("ows_Title") ; $("#mainmenu").append(liHtml); }); }}); });
The desired HTML would look like so <div id="mainmenu"> <div id="header"> <ul id="navbar"> <li class="menu"><a href="#">Home</a> <ul> <li><a href="#">liHtml </a></li> <!--I want to keep adding the <li> element with new item--> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> <li><a href="#">Menu item 5</a></li> </ul></li> </ul></div> </div>
Firstly, please understand that this is a very big web application. There is a "tabbed" interface that allows one to switch from page to page... On each page, there are tables.
Each table has a "minimize/maximize" function that will resize the table and hide/unhide specific columns in the table...
Right now, the tables are constructed as HTML tables. The TD's that are to be hidden are given the class "hidden[tableName]" whatever the table name may be.
When the table is maximized, i execute the following function:
function changeVisibleByClass(element, className, display){ var allPageTags = new Array();
for (i=0; i<allPageTags.length; i++) { if (allPageTags[i].className==className){ allPageTags[i].style.display=display; }}}
This has gotten to be quite inefficient and slow because it loads all of the visible TDs in the HTML and then checks each one for its classtype, changing the visibility as necessary. This works fine for a small page, but as my tables grow, this is becoming horribly inefficient.
I have a question. If you have a HTML list that pops up as a menu under a graphic in a layer when you mouseover the graphics, how do you instruct that layer to vanish again when you mouseout from the menu?
I can do onMouseOver show the layer and onMouseOut hide the layer, but I'm stuck when it comes to applying that to a larger area (ie: multiple clickable items). I can think of ways of doing it, but they're a bit clunky and I'm assuming there's a good or 'proper' way of achieving this.
I need to find a way to show/hide layers with the help of clicking a check box. I want it to be the default layer, then when a check box is clicked, that layer shows up. I need it to be able to display multiple layers (overlapping) that are linked to which check box is checked or unchecked. Code:
I have a dynamically generated page that has a rollover div that needs to be displayed for each of a number of links.
Now, this is easy enough to do on a small scale: as part of the loop that dynamically generates the page, I have a separate hidedivlinkID() and showdivlinkID() function, and it works really well except in NS4.x, which I'm not supporting.
However, once the list of links grows to a certain size--and in this case the list has grown to about 150--the page takes on a rather large size. At this point, it's around 250K.
What I'd like to do is have a single pair of functions in the header script:
function showdiv(linkID) { } function hidediv(linkID) { }
Such that I can call them easily. The problem comes in at the point where I try to pass the linkID out of the function, into the style-changing parts of the function. To wit:
function showdiv(linkID) { linkID.style.visibility = "visible" document.getElementById("legend").style.visibility = "hidden" } // End showdiv
doesn't work. (The "legend" div is separate and unique; it's not overduplicated). Similarly,
function showdiv(linkID) { document.getElementById(linkID).style.visibility = "visible" document.getElementById("legend").style.visibility = "hidden" } // End showdiv
doesn't work. Is there any way to make this work... or am I stuck with a bunch of extra functions on my page?
I'm trying to show and hide layers with css and a javascript function. It works, but the only thing I can't figure out is how to make it display ONLY one of the layers on initial load. Below is the following code that appears in the html doc.
Code:
<script type="text/javascript"> //visible layers function $_(IDS) { return document.getElementById(IDS); } function setVisible( IDS ) {
[Code]....
I can't seem to just get the "BIO" layer to display by itself on the initial page load.
In a nutshell, I'd like to have a list of items, each of which fills out a small table which displays some info about a particular item(the items being a trouble ticket for a tech support ASP-built web-based app). There may be zero, one, or many of these per ticket. Since some tickets have many of these items (call them work items), the page can get awful long. I have this part working already.
So my proposed solution to make the pages shorter would be to have one line for each of these little work items. If you click the text in that one line, it shows what had been a hidden div. If you click it again, it hides it.
I have an application, that will pull all articles associated with a user on a page.As some users have posted approx 100 articles, I want to hide all but the first 5, then have a link that will show the next 5 or the remaining article that are hidden (if less than 5)I have the following code:
jQuery.noConflict(); var numShown = 5; // Initial rows shown & index var numMore = 5; // Increment
I have 1 html page and 1 flash object on it when i click on that flash object than a image should b appear and flash object will hide when i click on that image than flash object should b appear and image will hide the page should b same no other pages
I finally found code that actually works. I click on the button, and the table disappears. I click on the button again, and it reappears. Like magic! I have two problems still.
(1) When I click on the table, it disappears, but the space that it was in is still empty. When it retracts, I want the rest of the text to retract with it (not disappearing text--i.e. have the text occupy the space where the table was, and move back when the table reappears. note: the text is directly below the table); otherwise, what is the point of a show/hide button? It's meant to save some space.
(2) I want the text of the show/hide button to change to "Show" when the table is not present. Code:
I would like to know if there is a way to keep the script as is but also add a function to this script so that if a user clicks on another tab (div) the open tab will close on click? Please see code below:
<!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>[code].....
I am trying to use JS to change the display.style property of a div from �block� to �none� in order to hide and show it. I find that my code works in Firefox but not in IE. Furthermore, I find that the code works fine in IE if the div I�m trying to show/hide is not floated, but when it IS floated then I�m able to hide the div but unable to re-show it once it�s been hidden. Finally, I find that when the div I�m trying to show/hide is floated left and is the left-most element on the page, it works fine, but when I have another element floated left before it, then it fails to re-show once it�s hidden. Here is my code. In order to solve this problem I have removed all other code form my website, so this is the only code. The HTML:
Above is my JS. What I want to do is, click the button and have the vstar image hidden. Then when I click on the button again, the vstar appears, but now the flower is hidden. And clicking the button again, the vstar is hidden and the flower appears again, and so on...
The indentation is probably a little wacky, since I just copy/pasted, but that's what I've got right now. When you click on .postTags_opener, it shows the nearest matched .postTags; that is exactly what I want, since .postTags immediately follows a .postTags_opener. The problem arises when I then try to close it: .postTags_closer comes after .postTags starts, so that's probably why next() is bugging out.
I'm new to jQuery, and I'm having issues with showing my DIVs correctly. The problem with the script at the moment, is that it currently opens up every single .display div, whereas I only want it to open up the one which corresponds to the.input a.edit which I've clicked.
The script hides them individually, displays the hide button and makes the show button display correctly like I wish, but it's displaying all the the .display div's at the same time which isn't what I want. For reference here is my jQuery script:
now when we click this button it will show a corresponding div objec, which is the parent div called 'frame1'. this div has two radio buttons "static" and "dynamic".
if the user clicks on static radio selection, i want to show a stDiv. here is the problem as this stDiv is not showing up on click event.the function is getting called as i had checked it using an alert.
if the user clicks on dynamic radio selection, i want to show a dynamicDiv, this is also not working.
i would also like to add one more problem. right now, when we click on button, it shows the frame Div, but this displaces all the other elements in the page, which are inside a table. is there a way to show this div above other elements without any changes in their position.. i tried to change the z index of the frame Div, but nothing changed..
