Way To Hide An Element By Clicking On Another?
Jul 8, 2011Code...
I want the second element to show/hide when the first element is clicked on, what would the easiest way to do this with javascript
Code...
I want the second element to show/hide when the first element is clicked on, what would the easiest way to do this with javascript
I have some existing code that I need to alter so that when the user clicks outside the element, the element disappears. I have looked at other show/hide element code, but I'm not sure how to integrate it with the script below.
There's a date form, with an calendar image icon. When you click on the calendar icon, a div with a calendar opens. Then you can click on the dates, that when clicked will fill out a textfield with the date.
The form code:
Code:
<div class="TSearchBox">
<div class="TSearchBoxDate">
<span class="normal TLabel">Frn: </span> <input name="TLfd" type="text" value="2010-03-30" />
<img src="images/datum.gif" class="TCalendarImage" alt=""
[Code]...
I`m trying to make selecting an select list option (as it become when we click on it)by clicking on a special pseudo element.I`m trying to do it in this way:
<script>
$(document).ready(function(){
$(".psevdo-checkbox").each(function(){
$(this).click(function(){
[Code].....
I made a website in which I -for the first time- included some jquery code. I am totally new at this. I managed to have a menu, whose elements can be clicked, which triggers the apparition of a different "bubbles" with text inside. So far so good. But I would like to make a bubble disappear when I click on another element than the one that triggered its apparition. Explanation :
My menu is for example like: menu element 1 | menu element 2 It should do this
>> click on menu element 1 = bubble1 (it works) >> click on menu element 1 = bubble 1 disappears (it works) OR >> click on menu element 2 = bubble 1 disappears, bubble2 appears (doesn't work! there I have 2 bubbles at the same time)
I have a table that display users in a database. When a user clicks on the usergroup a dropdown div will appear with a selection of available usergroups. I would like that div to hide again when the user clicks outside that div
Here is the code for the div
HTML Code:
I have no problem displaying the hidden div but i can't get it to close when the user clicks outside.
I want to show and hide a DIV tag in each row by clicking on check box.
my code is here:
$myCont="container_".$s;
$e .='<input onclick="showHide('.$myCont.');" type="checkbox" />
and in another file I create DIV with none static id:
$e .='<div id="container_'.$s.'" style="display:none;">';
it is not work in showHide function when I click on check box.
I'm having trouble making a main vertical navigation with two drop down menus and wondering if anyone can please help as I'm not great with javascript! I have a main menu and two drop down menus. At the moment I get them to open fine when the main link is clicked and close when it is clicked again. But I want dropdownmenu1 to close when opening dropdownmenu2 so that they are not open at the same time!
This is my javascript:
<script type="text/javascript">
function showElement(layer){
var planLayer = document.getElementById(layer);
if(planLayer.style.display=="none"){
[Code].....
I was just wondering whether there is a way to hide an element on another page after clicking on a button?Basically, I have a login page, and for testing purposes, I want it so when you click a button, it runs some javascript in a file called ajax.util.js, and I have a jQuery file attached to the HTML file as well URL..., and I am using Google App Engine, which im not sure whether thats relevant. I tried using the show and hide functions provided by the jQuery file, but no luck, i want to hide an element which is a link with ID admintools. I have also tried getting the element by ID and changing the display style to none and hidden but still no luck. Im not sure whether its only possible to hide elements in the login.html page.
What I want it to do basically is click on the submit button in the login page, it will then run a javascript function which redirects you to index.html (which i am doing using window.location), and then hides an element in the index.html page (id=admintools).
i try to make thing like this: My list is like below:
<
ul id="cssdropdown">
<li class="headlink">
Search Engines
<ul>
<li>Home</li>
[Code]...
</ul> what i want is, when i click the <li>(home,downloads..),i will take its value and i write the value instead of "Search engine". How can i make this?
I have this simple code and I am trying to change the text in one element by clicking on the other.
Relevent code shown:
<script type="text/javascript" language=javascript>
$(
'#A').click
(
[Code].....
i have a search icon at the top of my page, when i click this it toggles show/hide on the search form. now when the user loses focus of the search form (.blur), i want it to activate the hide part of the toggle.
when the search icon is clicked, it gives focus to the search form, so the moment the icon is clicked, the search form gains focus, then when someone clicks somewhere else on the page and the form loses focus, i want the search form to hide.
the problem is, if i just have the search form hide on .blur, then when you click the search icon and then click somewhere else and the search form loses focus, and then you click the icon to show the search form again, it will hide the search form(to the user, it looks like it didn't do anything, since the search form is already hidden). so after 2 clicks on the icon, then, it finally shows the search form again.
[Code]...
I'm trying to change content depending on the <a> link the user clicks. My code is far is as follows but isn't working?
HTML
<div id="content">
<div id="cx300">
<div class="auriculares_spec_mx560">
<h2>cx300</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna.</p>
</div>
<img class="img_cx300" src="img/cx300.jpg" alt="Sennheiser Headphones CX300"/> .....
On a page I display a link of search results which are hyperlinks, which all have the same URL get paramaters with different values (i.e. companyreport.aspx?....). I want to then click on a search result hyperlink and then generate a Div popup (this is called through a javascript call that is attached to each search result hyperlink's onClick property.
For the hyperlink that is clicked, I need to take its 'href' value and use it (reason for us is in a bit).
On the popped up Div element is a dropdown box and two buttons (accept / decline). Once the accept button is pressed, I want to then go to the page the selected hyperlink was pointing to by using the 'href' value I obtain from the clicked search hyperlink and to also append to this hyperlink the a new GET parameter and the value of the dropdown box.
I have got this to work currently but it seems quite mess, so was wondering if there is a better solution to this.
For the search results hyperlinks I have...
Code:
PromptRequestReason(this.href); return false;
this '' javascript method is....
Code:
function PromptRequestReason(hrefLocation)
{
lnkDERequestReason.href = hrefLocation;
popup('popUpDivReason');
}
then on the DIV popup I have the following link....
Code:
<a id="lnkDERequestReason" onclick="this.href = this.href + '&reason=' + document.getElementById('drpPortfolios').value">Select</a>
now this all works, but I really seem like I am taking the long way around when there could be something simple.
It is possible to make a script that hides the element clicked and this way hide the items I want.
View 1 Replies View RelatedI am working on a e-commerce site and I need to hide the checkout link (<a>) if the value of of the element (<td>) holding the amount due ="$0.00".
<tr
>
<td
colspan
[code]....
Alright, I got the basic idea (which is relatively easy):
function show_el(id)
{
var obj = document.getElementById(id);
obj.style.display = "block";
}
function hide_el(id)
{
var obj = document.getElementById(id);
obj.style.display = "none";
}
The problem is, you need 2 different links, one to show the element, one to hide it. What I want is one link that changes depending on whether or not the element is showing: If it's showing, the link will be "Hide Element", if it's not, it'll be "Show Element."
I've seen this done a lot, mainly in expanding/collapsing, which is basically what I'm doing. I imagine it's not all that hard, but I just can't seem to figure it out.
I'm trying to hide() show() an element when a specific checkbox is checked, the checkbox is nested within an asp Panel which is nested within a Web User Control.When the user control is loaded, the checkbox's id changes to the panel id + the checkbox id due to the face that i have an unknown number of user controls that can be added to the same aspx page.I need a way to hide a textbox when the checkbox is checked without using the '#controlId' syntax, and when i pass the txt.id its not working:
toggleMe: function toggleTest(ID) {
var elem = document.getElementById(ID);
var parentId = $(elem).parent().parent().parent().parent().attr("id");
[code]....
Does anyone know what's wrong with this code because when the page loads, the link is not being hidden
window.onload = setTarget;
function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
[Code]...
how do i hide the popup list.. i would like to if the user click outside of that div element.. the popup div will hide. but whenever i select the body or the id containing that popup div.. the whenever i click the down arrow button.. it shows the popup div.. but then closes again.. because of the selector hide on the container div.[URL].. here's the test page..
when i click the down arrow.. it shoes the popup.. how to do if i want that any click outside that popup element.. i will call the hide/fadeout for the popup element..
I am wondering if someone could give me a quick hand with some php im trying to edit in Wordpress.
Heres the original peice I am trying to edit:
What I want to do is when "the_author" equals "admin" for the div to be hidden or deleted.
I have added this to make sure that it can find admin
My question I guess would be is there a statement that would be able to hide/delete the div? Or should I be re-writing this code, like this...
I have the numbers "1 2 3" set up on a page to change a image and text when you click on each number. It works fine but I am not able to figure out how i can get the numbers to stay a specific color to indicate that this is the image you are viewing, a kind of "you are here" state.
View 1 Replies View RelatedI am trying to hide a div when the min length of a text box is two or greater but everything I've tried is a bust. Does anyone have a good snippet of code for this.
View 1 Replies View RelatedConsider the following:<div id="item-1">
<a href="#">The Link</a>
<div>The contents shown on hover only</div>
</div>
I'm positioning elements absolutely. I want the child DIV to show when I hover over the link. Here is how I'm accomplishing this:
$("#item-1 a").mouseover(function() {$("#item-1 div").fadeIn('fast');})
$("#item-1 a").mouseout(function() {$("#item-1 div").fadeOut('fast');})
This works wonderfully. But I would like to make this generic so that I need 2 lines of code, not 2 times however many items I have.
I have small online shop and in the top section I have a mini cart, which a user can click on and expand an area to see what products they have added to their cart.
The problem I am having is that for a brief moment when the page initially loads the expandable area becomes visible until I the .ready (hide) function kicks in. Is there any way that I can actually hide the cart on page initialisation so its not visible even for a brief moment?
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery('dl#mini-cart> dd').hide();
[Code]....
I know the show() or hide() methods, but what if I just wanted to show say half of an element and hide the other half? is this possible using jquery?
View 1 Replies View RelatedI have a hidden spinner div. When my jquery function is called -- I show the spinner. But, how do hide I the spinner div after the ajax request has completed?
$(function() {
$(".pagination a").live("click", function() {
var loader = $('#loader')
loader.show() // <-- hidden loader div
[Code].....