Hiding A Div When Clicked Outside Of It?
Jun 1, 2009i 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
View 2 Repliesi 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
View 2 RepliesI 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?
<html>
<head>
<link rel=stylesheet type=text/css href=layout.css />
[code]....
i want to hide my phone numbers in an output page so that the viewerhas to click an icon to see it.i have the following jquery so far:
<!---JQuery test to hide phone--->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
[code]....
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?
<style type="text/css">
ul.nobulletnoindent {
list-style-type: none;
[code]....
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?
View 4 Replies View RelatedI 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:
{foreach key=num item=account from=$accounts}
<div id="info">
<div class="box round">
<table cellspacing="1" class="data">
<tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">
<td>{$account.regdate}</td>
<td>{$account.product}<br /><a href="http://{$account.domain}" target="_blank">{$account.domain}</a></td>
<td>{$account.nextduedate}</td><td>{$currencysymbol}{$account.amount} {$currency}</td>
<td><a>View Details {$account.id}</a></td></tr></table></div></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.
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'm using the following css code which wrapped around a dynamically populated field;<span class="ui-widget-header platform ui-corner-all"></span>
When the span is empty I want to hide it, and I've used this jquery to do this.
However, the ui-widget-header class appears to be stopping it from hiding - if I remove this class it hides fine.
[URL]..Default.aspx I have both a carousel with images andalso animagemap(notnot published yet)with coords that when clicked i want to write to a cookie file which image or image map coordinate was clicked, so when they are hyperlinked to the next page the correct div opens based on first reading the cookie written to on the previous page. Anybody have a basic script for reading and writing to a cookie using jquery in this fashion?
View 2 Replies View Related<script language="JavaScript">
function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}}
</script>
what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working.
how to keep the clicked area selected until another area is clicked.
View 8 Replies View RelatedIm trying to build on a script that I found on the internet and modified to my needs.urrently there are three images on the left, which, when clicked, change the image on the right depending on which of the left images was clicked.Simply, when you click the whisky link on the left you see a bottle of wiskey on the right. Here is my script:
Code:
<SCRIPT TYPE="text/javascript">
function switchImg(i){
[code]....
I have a very simple web page that is comprised of the same image over and over again. I have it to when you click on it, it swaps the image out and adds 1 to the counter. I need it to subtract 1 when you click it again.
<script type="text/javascript">
var namesVec = new Array("block.png", "block_hover.png");
var root='images/';
function swapImg(ima){
// divides the path
nr = ima.getAttribute('src').split('/');
// gets the last part of path, ie name
[Code]...
I mean, is there a way to assign "add 1 when clicked" or "subtract 1 when clicked" to image properties?
I have hidden some parts of my menu, but I can't seem to hide the div tag.How do I accomplish this? This is my jquery:
$(function(){
$('ul.ldd_menu li.topLink ul').hide();
$('li.topLink').hover(function(){[code]....
It seems like my <div> class isn't getting hidden because if I do a border css, I can see the border lines.
I have a page, which looks a bit like this:
....
<body>
<div ID=id1>................</DIV>
<div ID=gsd>................</DIV>
<div ID=ewd>................</DIV>
<div ID=fac>................</DIV>
<div ID=act>................</DIV>
</body>
I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like
<A HREF="#esf" onclick="showdiv('act')">
What would be the best way of doing this?
I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row.
How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids.
I have this simple checkbox menu [URL]
If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top.
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");
[code]....
Does anyone know the javascript to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cells or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up... possible?
View 8 Replies View RelatedI am trying to write a script that will hide a table in NS4. getElementById only works with IE4+ +NS 7 anyone go any idea how to adapt to function below to support NS4?
function hide(st)
{
document.getElementById("hide").style.display=st;
}
is someone know a good way to show/hide a div in explorer as style.display do not work at all for me. I also try with visibility but then, it doesn't work in Firefox as I still see the scrollbar.
View 1 Replies View Relatedi 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.
View 10 Replies View RelatedI 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.
View 3 Replies View RelatedI found this code to Show/Hide a DIV. The great thing about it is that will hide the div by clicking anywhere outside the div, which this does.
However, how can I edit this to allow for multiple DIVs?
If you can't help with this particular code, Do you have another code solution I can use for individually showing many divs and then hiding them by clicking outside the div.
I have some javascript that when a link is clicked hides the div and when it is clicked again shows the div... what I want to do is reverse that, so it is intially hidden. I have tried changing the display none to different parts but it always shows on load:
function toggleDiv (divid) {
if (document.getElementById (divid).style.display == 'none') {
document.getElementById (divid).style.display = 'block';[code].....