JQuery :: Hiding List When Another Anchor Is Clicked?
Feb 16, 2011
This is my FIRST attempt at using Jquery to make a site menu for a client, and I'm pretty new to Javascript as a whole..I have a two column horizontal menu, and when an anchor on the left column is clicked it brings up a list in the right column..how do I hide list in the left column when a different anchor is clicked, bringing the new list to the top of the column?
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:
I need to get the page to reload with the anchor in the link when it is clicked in a dropdown menu. For example if I am on 'www.domain.com/about/#2' and I then click on 'www.domain.com/about/#3' the url changes but the page doesn't reload so I need the page to reload, but keep the new anchor (#3).I gave the links with anchors a class of 'reload' and tried this:
I basically have many anchor links where when I click each of them it slidesdown its own div with some text in it. So have I wanted is when I click on one link it will show me the current one and hide the others. This is what I have tried which works great but when I click on a link it opens the div, then click on another one opens the div with one click and when I go back to re-click the previous link I have to double click it in order to work..
This is my js code: $(".anchorlink").toggle( function() { var cont_val = $(this).attr("id"); $("div#unique_anchor_text", this).show(); $("div#unique_anchor_text").hide(); $('.unique_anchor_text'+cont_val).slideDown("fast"); }, function() { var cont_val = $(this).attr("id"); $('.unique_anchor_text'+cont_val).hide(); });
HTML looks like: <a class='anchorlink' id='$item'>Comment</a> <div id='unique_anchor_text' class='unique_anchor_text$item'>some text</div>
I need the info div to hide when the the table row is clicked: <tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;"> This is what I'm using to hide it. But because I have multiple divs called info that I need hidden it is not working currently its only hiding the first div called info.
as you can tell by the following statements, i'm new to jQueryI'm trying to do the following (in plain english) without too much success.. ) when document ready.. 2) find the element with id 'next'.3) pull / take all 'li' elements, and perform so and so, all whilst excluding 'last' element.
$(document).ready(function() { $('#next').click(function() { $('li').each(function() { //for each li ..
I recently had a request from a client and I'm not entirely sure this is possible. I'll try to explain it the best I can, as I can't share the development files yet...
We have a page with an image map of the United States. If anyone clicks on a state, it will bring them to a new
page. This new page contains a table that has named anchors on it, each row being a different state.
So, for example, if someone clicks on South Carolina on the map page, they will be brought here[code]...
The #sc anchor will scroll the new page down to the row in the table about South Carolina.
Is there any way to highlight the table row that the person is looking for? For example, if they click on South Carolina, they will be brought to this new page and the South Carolina row in the table would be highlighted.
I awhen it comes to "developing" jQuery but I am trying to do something that is seemingly something simple but I can't for the life of me, figure out the best way to do it.
http:[url].....
Here, you'll see the area below the navigation that has five buttons which are supposed to help scroll between the five associated divs.All I want to do is hide the currently shown div and then slide in the div associated with the button clicked.http:[url].....Here is what the animation is SUPPOSED to look like but the problem is is that the correct one uses Prototype and I am trying to use only one library and jQuery is the most suitable because I use it for other effects in the site and jQuery and Prototype obviously don't mesh well.
i am trying to make a popup div which will close down after the user clicked outside of it now i am looking for a way to determine if the user clicked outside of the div or not
I need the letter button (the letters of the alphabet) to disappear when clicked, but reappear when hangman game restarts (by clicking start over button). How do I do this?
Let's say I have two lists for menus and one list for sortable content.
If I click on "A" in the #type list, the content list is sorted, the li's with the classes "B" and "D" are hidden by attaching a class of .hidden to display:none. In turn becoming:
My question is, how do I apply the new content results to the #location menu? If "B" and "D" are hidden then numbers "3" and "4" shouldn't be displayed. I'm having trouble getting the two to talk to each other. I've tried .is(':visible"), .each(), etc. and can't quite crack it.
I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?
onClick="function(' whats the value of the anchor tag just clicked? Title basically says it. I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work. I'm sure this is REALLY easy to do, but I don't know it and I have no idea what to search for.
The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, i can't seem to .show() the selected 'gallery' w/o showing them all...........
I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work.
I have a list item, where only some of the items are linking to a quote from the client. The quotes are in another list, where each list item has an id corresponding to the client link. I want to show the client quote when you roll over the client anchor link. Currently when I mouseover it's showing nothing.
At the moment, when I mouseover one of the anchored client links, the content disappears, so it's not showing the correct client quote <li>. $(document).ready(function() { // see if the requested page url contains an anchor '#' var hash = window.location.hash.substring(1); // if no anchor, show the default blockqoute if(!hash){ var id = 'default'; }else{ var id = hash; } .....
I am looking for a way to add an id attribute to a div element I append to my document so that i can find the id later and delete it. So far, no luck with jquery .each loop trying to assign unique value and add incrementing value to each of them. In my code, they all seem to have the same id and when I click again it just appends the same value again to all of them.
//first I add a title to the list using append. function addTitle () { $('.myList-box').append('<div class="mylistitem"><div class="mylistitem-image"><img width="30" height="40" src="[URL]small.aspx?TitleID=' + titleid + '"/></div><div class="mylistitem-title">' + title + '</div><div class="mylistitem-options"><a href="javascript:removetitle();">Delete From List</a></div>'); } // then I need a click function, that indexes all the current .mylistitem(s) and allows me to find the id I am clicking on so I can delete it! function removetitle() { $(".mylistitem").each(function(i) { this.id = this.id + "_" + i; }); var item = $(".mylistitem").attr("id"); alert(item); }
In my list box if i select one item corresponding to that 4 fields has to be appear below the list box and if i select another item only 1 field has to be appear below the list box and if i select another item no fields has to be selected.
I am building a sort of tree view in javascript with items that can be expanded and collapsed (with default being collapsed).The problem is the page can get very large, and the user sees the the browser render the list with all the items expanded, and then sees them all collapse after half a second.[/quote]You could use a setInterval in the head section that's on a tight loop, that waits and watches for the tree, then hides it and removes the setInterval process.
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
