|
JavaScript - How To Hide A Ul When I Click Out?
hello!
I currently have 2 UL's that get slide down when you click a button (used for navigation). I currently have it set up so that when you click the "ul#selectService" they slide down, and when you click it a second time it will slide back up and disappear. However, they only way to get the UL's to disappear is to click the "ul#selectService" a second time, so I'm trying to get it set up so that when you click on anything that isn't the UL's it will cause it to slide back up again. i currently have been working on a starting idea to show what I'm basically trying to do so that you can get a rough estimate of my goal: This is my HTML that i'm using: Code: <ul id="selectService">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="secondHalf">
<li></li>
<li></li>
<li></li>
</ul>
Code: var $box = $('#selectService');
$("*:not(#serviceSelect)").click(function(){
if (!$box.has(this).length) { // if the click was not within $box
$('#selectService').hide();
$('#secondHalf).hide();
}
});
Right now nothing is happening when i click out of the UL any thoughts? Similar Tutorialshttp://www.codingcereal.com/2010/12/...-tab-switcher/ when i change the js code to this: Code: j Code: Query(document).ready(function() {
jQuery("#tabswitch ul li:first").addClass("active");
jQuery("#tabswitch div.tab-container:first").show();
jQuery("#tabswitch ul li").click(function(){
jQuery("#tabswitch div.tab-container").hide();
jQuery("#tabswitch ul li").removeClass("active");
});
})
for the default state. the tab1 is show, but why when i click the tab1. it doesn't hide?. but there is a line in the click function. jQuery("#tabswitch div.tab-container").hide(); could it be that this line doesn't effect on it? jQuery("#tabswitch div.tab-container").hide(); Hi Im trying to make a dropdown menu like IGN has on his site with the following javascript code. The only problem however is I can't seem to hide the menu when a user clicks outside the menu. This is a bit frustrated because when a user wants to hide the menu again the need to reclick the menu header. Is there anyway I could solve this problem? Also a explanation about the code would be helpfull im not used to work with javascript. Also this is the code I have so far which works to onclick hide and show the menu. javascript: PHP Code: function toggle(id) { var el = document.getElementById(id); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } HTML: PHP Code: <a href="#top" onclick="toggle('view_user-options');";>Panel</a> <div id="view_user-options" style="display:none;"> <div class="nav_option"><a href="">my test</a></div> </div> Also if anyone knows how to do it plz combine it with my code so it works. I always get in trouble with javascript when combining two codes in one. Note: plz don't give me solution with tons of code I just want a verry simple solution. Hey. I've got some code that shows a div if a link is clicked. How can I add to the code so when it's clicked again, it hides it. Here's my code (the .linkon class needs to be removed again after as well): Code: <style type="text/css">
.linkoff-div .linkon {
color:orange;
font-size:15px;
font-weight: bold;
}
.linkoff-div {
text-align: left;
line-height: 20px;
border-bottom: 2px solid #344050;
margin-top: 15px;
}
.linkoff-div a {
color:white;
font-size: 15px;
}
#faq1 {
background-color: #596778;
width: 540px;
padding: 5px;
}
</style>
<script type="text/javascript">
function hideall(){
document.getElementById("faq1").style.display="none";
document.getElementById("faq2").style.display="none";
document.getElementById("faq3").style.display="none";
document.getElementById("faq4").style.display="none";
document.getElementById("link1").className="linkoff";
document.getElementById("link2").className="linkoff";
document.getElementById("link3").className="linkoff";
document.getElementById("link4").className="linkoff";
}
function myclick(id){
hideall();
document.getElementById("faq" + id).style.display="block";
document.getElementById("link" + id).className="linkon";
}
</script>
<div class="linkoff-div"><a href='#' id="link1" onclick="myclick(1);return false;" class="linkoff">Registration</a></div>
<div id="faq1" style="display:none">
Registration stuff
</div>
<div class="linkoff-div"><a href='#' id="link2" onclick="myclick(2);return false;" class="linkoff">Logging In</a></div>
<div id="faq2" style="display:none">
Logging in stuff
</div>
<div class="linkoff-div"><a href='#' id="link3" onclick="myclick(3);return false;" class="linkoff">My Account</a></div>
<div id="faq3" style="display:none">
My Acccount stuff
</div>
<div class="linkoff-div"><a href='#' id="link4" onclick="myclick(3);return false;" class="linkoff">Videos</a></div>
<div id="faq4" style="display:none">
Video stuff
</div>
Thanks, Adam Hi i want to hide a table when user click on a link this is my code looks like PHP Code: <div id="sh"> <table width="800" border="0"> <tr> <td></td> <td></td> <td></td> </tr> </table> </div> <div align="center"><a href="JavaScript:window.print();"><img src="images/print.png" alt="Print this page"/></a></div> is it possible to hide above table at same time print this link clicked? any help would be great sorry for language errors Regards. Hi well my problem is.. 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.. http://development.andrewfopalan.com/devpage/test.html 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.. please help.. tried various things.. just a shed of light will do.. thanks hi all. i'm still newbie with programming. i have created a table with two columns with a list of scholarship and a read more link. this is the table that i made: what i want to do is to hide the second column if the user click the "read more" in first column and hide the first column when the user click the "read more" in second column. if the user click "read less" it will show both column back like normal. i try to use the javascript for hide column but it cannot link with my "read more" script. i hope that anyone can help me. thanks in advance 1. I have code to show tip like: <a class="notvisible" onclick="mytip.disable();" href="javascript:void(0);">Close</a> How is correct Javascript code to Close this tip when clicked? 2. How to move next news feed with click on arror icon and back icon? <a onclick="mynews.previous();" href="javascript:void(0);">Previous</a> <a onclick="mynews.next();" href="javascript:void(0);">Next</a> How is correct Javascript code to move news item next and prevoius news? when clicked? <script type="text/javascript"> mynews.init(); mytip.init(); </script> hello guys im new in creating sites and i dont know anything about javascript so i creat a web page in frontpage 2003 wt i want to make there is.. the page is a downloading page. so i want the vistor of this page to click the adv. first, then the download link will apear, only if he/she click on the adv. here is the code of the page Code: <html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome to my site Download page</title>
</head>
<body>
<p align="center">"Site logo"</p>
<p align="center">Welcome to my site Download pages</p>
<p align="center">To be able to view the download link you have to open the
following advertisement first.</p>
<p align="center"> </p>
<p align="center"> <!-- Begin: AdBrite, Generated: 2009-12-10 23:02:17 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0000FF';
var AdBrite_Text_Color = '000000';
var AdBrite_Background_Color = 'FFFFFF';
var AdBrite_Border_Color = 'CCCCCC';
var AdBrite_URL_Color = '008000';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<span style="white-space:nowrap;"><script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1435752&zs=3732385f3930&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1435752&afsid=1">
<img src="adbrite-your-ad-here-leaderboard.gif" style="background-color:#CCCCCC;border:none;padding:0;margin:0;" alt="Your Ad Here" width="14" height="90" border="0" /></a></span>
<!-- End: AdBrite --></p><hr>
<p align="center"> </p>
<p align="center">Thank you</p>
<p align="center">
<a href="http://pearl.plunder.com/x/$kE_C_2YS2UAKXpp9SYAs5VA2mKS3AqHD/0fa75b6711/?/FarmVilleClicker.exe">
Click here to download the file.</a></p>
</body>
</html>
so this page is linked to my blog and the downloading webpage im sorry for my bad english any ideas.. ill be so thankful I am having problem with editing string on mouse click. I have a string of text like this: Code: id1=&id2=&id3=&id4=& And now I need to show/hide part of string by clicking on a links. I would like to hide/show each id's (i.e. id1=& It is simple to hide whole text but how about part of it ? Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser Hi Experts here, Pls help. I have written the html code like this: <a href="http://mypage.com/docfiles" target="_blank"> Click </a> But the problem is when ever the user click the click option complete url is displaying in two ways 1)on the buttom of the status bar 2)Right click on the option open the properties than also we are getting the complete url. But we don't want to see the complete url,How to hide the Url. Please give me solution I am struggling alot. Thanks and Regards, Srinivas yadav. Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section hi i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files) Now what i need is, onclick of HOme button.. i have written a code like <a href="main_Home.html" onclick="updateObject(this); return false;"> and the javascript i got from dhtml goodies is <script type="text/javascript"> function updateObject(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } </script> now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there.. Pls help.. Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much I am a middleware developer for a design and manufacturing software. We recently have gone from using Crystal reports to using xml based reporting. I am just begining to write reports using xsl, css and java script and transforming to html. The report I am working on has several tables each in a separate div. These tables are populated based on the xml file output form a job file. Base on job settings one or more tables may have no information in them. What I would like to do is hide the divs with empty tables when the page is loaded. I have looked through the forums here and on other sites and have found perhaps hundreds of examples of java script for showing and hiding divs with user input or by being set to a hide state by default. However I need it to be more dynamic. I think this can be done with java script but not sure hopefully someone can help me. Thanks PShorty I want to be able to hide a DIV within an iframe from the parent document. The usual document.getElementById('element').style.display="none"; doesn't work as I can't point to elements within the iframe with it. What do I need to add to make it look within the iframe and not the parent document? Many thanks in advance. Hey everybody, I have a script that hide a div like in a menu, bur the text of the div dont hide.... Code: <script>
function aumenta(id) {
target = document.getElementById(id);
setInterval(function(){
new_size = target.style.height;
new_size = new_size.split("px", 1);
new_size -= 10;
new_size = new_size + "px";
target.style.height = new_size;
//target.style.width = new_size;
},1);
}
</script>
</head>
<body >
<div id="da" style="width:300px; height: 300px; background-color: #0066CC;" onmouseover="aumenta('da')">dDffffffffffffffffffdsdsd</div>
</body>
What part I have to fix in my code, for do what I want? Thanks! |
|||||||