JavaScript - How Do I Hide An Element If I Click Anywhere On The Page..

http://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();

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.

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

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.

i've been trying to toy with this script, which works fine.. except for a few things

http://jsfiddle.net/f9j9a/112/


what i would like it to do is to, for instance, always keep div1 on top.. no matter what other div is clicked

and when you've brought one of the divs to the front and click on a different one, i want it to move directly behind the newly clicked div..

so is has to mimic the way it works on your OS


any ideas??

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">&quot;Site logo&quot;</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">&nbsp;</p>
<p align="center">&nbsp;<!-- 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">&nbsp;</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

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>

Hi all,
I'm working on a script which is actually a very simple tab system.

Code:

<script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li a').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});
});
</script> 

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please?

I'm using the 1.2.0 version of mootools for this.

I am having problem with editing string on mouse click.

I have a string of text like this:
Code:

id1=&id2=&id3=&id4=&amp

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=&amp


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

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.

I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help.

I have the following jscript code but it is now working.

Code:

window.onunload = submitParent;
function submitParent() 
{
  var doc = window.opener.document,
      theForm = doc.getElementById("finalForm");
      theField = doc.getElementById("finalSelected");
  theForm.submit();
  theField.trigger('click');
}

My form from the parent page is as follow. I want my jscript to just click on the submit button once.
Code:

<form id = "finalForm "name= "finalForm" method="POST" action="">
<input type="Submit" id = "finalSelected" name="finalSelected"/>

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.

Hello,

I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.

I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:

Code:

<td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td>

The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script.

The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue..

http://watch-movies-online.anyfilman...-Movie-17.html

To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com.

If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required.

Please feel free to ask any questions, i'll be happy to answer.

Thanks in advance.

Best Regards,
Jonathan.

Hello,

I am currently using Code:

onload="document.getElementById("hidepage").style.visibility="hidden";"

to try to hide a div box. Yet this will not work. I've tried FF, IEpp4 (IE platform preview 4) and IE9beta. This is the correct <div> id, and I do not know why this will not work.

Thanks!