JavaScript - Jquery Address And Show/hide

What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code.

Code:

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
  suggestions.hide();
  // On the change of the id_location text search for matching results.
  $('#text').keyup(function(){
    // Get the value of the id location.
    var text = $('#text').val();
    // Trim any unnecessary white spaces.
    text = jQuery.trim(text);
    // Start guessing after the length of text if greater than one.
    if (text.length > 1) {
      // Create a query string for ajax.
      var qry_str = '?suggestion=' + text;
      // Send an ajax json request.
      $.getJSON('http://example.com/page.html' + qry_str, function(data){
        // Empty the suggestions box.
        $('#suggestions').empty();
        // Show the suggestions box.
        $('#suggestions').show();
        if (data.length > 1) {
          // Start a list for the suggestion.
          $('#suggestions').append('<ul class="suggestion_list"></ul>');
          // Loop through all the results.
          for (i = 1; i < data.length; i++) {
          // Get the name.
          $('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
        }
        // If an id selection was made then place its complete text in the box and its id in the id location box.
        $('.suggestion').click(function(){
          // Get the id from the substring of the html id.
          var html_id = $(this).attr("id");
          var id = html_id.substring(11);
          // Get the name from the text.
          var name = $(this).html();
          // Alert just to test if you have the id.
          alert(id);
          // Set the value of the text box to the complete name.
          $('#text').val(name);
          // Hide and empty the suggestion box.
          $('#suggestions').hide();
          // Turn the focus back to the text.
          $('#text').focus();
        });
/*  This is the part that messes up the suggestion click function if turned on. */
        // Hide the box when focus is else where.
        $('#container').focusout(function(){
          alert('test');
//		  $('#suggestions').hide();
        });
      });
    }
  });
});
</script>
<div id="container">
  <input type="text" id="text" name="text" value="">
  <div id="suggestions">
    <ul class="suggestion_list">
      <li id="suggestion_1" class="suggestion">Option 1</li>
      <li id="suggestion_2" class="suggestion">Option 2</li>
      <li id="suggestion_3" class="suggestion">Option 3</li>
      <li id="suggestion_4" class="suggestion">Option 4</li>
    </ul>
  </div>
</div>

The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help.

I don't know a lot about Javascript... still learning..
I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code:
Code:

<script type="text/javascript" >

function showSample() {
	
  if (document.getElementById('input').value='SW001') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW002') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='block';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW003') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='block';
    document.getElementById('SW004').style.display='none';

  }
    else if (document.getElementById('input').value='SW004') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  
    else if (document.getElementById('input').value='SW005') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='block';

  }

}

</script>


<style type="text/css">
<!--
#main {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	height: 125px;
}
#imageArea {
	float: right;
	width: 200px;
}
#formArea {
	float: left;
	width: 200px;
	height: 125px;
}
.image {
	height: 125px;
	width: 125px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
#SW001 {
	background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
	background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
	background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
	background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
	background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="imageArea">
    <div class="image" id="SW001"></div>
    <div class="image" id="SW002"></div>
    <div class="image" id="SW003"></div>
    <div class="image" id="SW004"></div>
    <div class="image" id="SW005"></div>
  </div>
  
  <div id="formArea">
    <form action="" method="get">
      
      
      <input  type='text' name="input" id='input' />
      <input name="" type="button" onclick="showSample(this.selectedIndex)"/>
      
      
    </form>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated!

Hi guys, im new to forums and need some help with my website.
I have embed a flash player known as: JW player into my website and put it into a div.
Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif.
How would I set this up?
Im not to familiar about using javascript so im not sure if its even possible.
Anways thx for any help ore suggestions related to this subject.

Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link...

<script type="text/javascript">
function show(){
document.getElementById(test).style.display="block";
}

</script>

<div id="test" style="display:none;">
<p>Some text</p>
</div>


<a href="#" onclick="show(); return false;">Show</a>

ok trying to get a Div tag to show if something is True and hide if something is False

JS
Code:

unction eToggle(anctag,darg) 
{
 var ele = document.getElementById('Module1');
   var ele = document.getElementById('Module2');
   var ele = document.getElementById('Module3');
   var ele = document.getElementById('Module4');

  
  if("module1" + "module2" + "module3" + "module4" <40)
  {
    div.id.Failed = "block";
	div.Failed = "Failed";
  }
  else 
  {
	div.style.Passed = "block";
	div.Passed = "show";
  }
}

HTML
Code:

<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome

I have a script to show and hide various divs based on a function & var.

The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

here is the JS:

Code:

function sitesurveyswitch(emotion) {

	var e = emotion;

	document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
	document.getElementById('FeedbackHate').style.display = 'none';
	document.getElementById('FeedbackOk').style.display = 'none';
	document.getElementById('FeedbackLove').style.display = 'none';
		
	if (e == 'hate')
		document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackHate').style.display = 'block';
	if (e == 'ok')
		document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackOk').style.display = 'block';
	if (e == 'love')
		document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackLove').style.display = 'block';
}

and here is the code related to this function:

Code:

<div id="siteSurveyBox">
				<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
				<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
				<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
			</div>
			
			<div id="FeedbackHate" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackOk" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackLove" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>

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

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>

</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>

can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html

using this code: http://www.linkstraffic.net/programm...nd/movediv.php

heres my code. can someone fix it?

html:

[CODE]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris MacDonald - Javascript Assignment 2</title>

<link href="styles/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java.js"></script>

<div id="header">
<div id="logo"><img src="images/beat.png" /></div>
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li>
<li><a href="#">About Us</a></li>
</ul>

</head>

<body>

<div id="content">

<a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a>

<div id="coverlogin">

<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br/>

<p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p>
</div>

</div>
</div>


<div id="footer">
<div id="footertext">Beat Threads - 2010</div>
</div>





</body>
</html>
[CODE]

javascript:

// JavaScript Document

var hh=0;
var interv;

//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{

//Depending on the amount of text, set the maximum height here in pixels
if(hh==40)
{
clearInterval(interv);
return;
}

obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}

function HideBox()
{
obj = document.getElementById("coverlogin");

if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(interv);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}

[CODE]

Can someone fix this for me?

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 want some thing that when i click a button it shows a div then hides the button. I found this:

Code:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>

<div id="sub3">Message Box</div>

But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help.

Alright, me having a very basic knowledge of js I'm looking for some help with(what I think should be) a simple hide/show of a set of divs. I've broken down the ccs/html I'm looking at on a test page here - http://www.grinnbarrett.net/test.html

The js I have in the page had been what I tried to modify from a simple hide/show, but it's not doing what I want it to do (obviously). The goal is when you click on link 3, I want white3 to hide and all the other white divs to show, when you click on link 3, white 2 will hide and the other white divs will show, and so on. So basically it's revealing what div you click to. A lot of what I've found have been just toggles, but I'm not very confident in my ability to adjust code.

Any and all help would be appreciated.

Here is my code to show and hide two division via two links ...
Nothing is happening......Can you plz suggest me, where I am wrong ?

<html>
<head>

<script language="javascript" type="text/javascript">

function toggle(show, hide)
{


document.getElementByid(show).style.display = "block";
document.getElementByid(hide).style.display = "none";

}



</script>

</head>


<body>

<div>

<a href="javascript:void()" onclick="toggle('first','second');" > First </a>

<br/>

<a href="javascript:void()" onclick="toggle('second','first');"> Second</a>

<div id="first" style="display:none">
First division</div>

<div id="second" style="display:none">
this is second division</div>


</div>

</body>
</html>

Got a quick question,

I need to adjust the below code, so that when a question is open and you click on different question it automatically hides the question you opened first. How would I do that?

Code:

<!doctype html>
<html>
<head>
<title>TEST TEMPLATE</title>

<script type="text/javascript">
      function showHide(id) {
        var div = document.getElementById(id);
        div.style.display = ( div.style.display == "none") ? "block" : "none";
      }
</script>
</head>
<body>

<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
    <li onclick="showHide('FAQ1')">FAQ one</li>
    <li onclick="showHide('FAQ2')">FAQ two</li>
    <li onclick="showHide('FAQ3')">FAQ three</li>

<!------ ANSWERS ------>
		<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
		<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
		<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>

</body>
</html>

Thanks,
Jon

hi, here is my Javascript to show and hide my comments div:

Code:

<script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

I would now like to animate the div fading or moving down

can someone please help?

thanks