JavaScript - Editing String On Mouse Click (show/hide Part)

I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories.

i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want.

I'm working with the following images:

arrow1:
arrow2:
arrow3:

in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself)

the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1".

this is the code I'm working with, hope someone can help

Code:

<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"

second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>

<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>

Hey guys!
How can i simulate a click event?

Like a real mouse click.
and a keyboard click event?

I have small webBrowser1 and I have the 3 Buttons(Back, Forward,Go) also I have the ComboBox1 with the Items Collection of different website url
using MSVB 2008 in C++
My question:
1) How could I make my mouse click on each url with timer between the first url and the second and so on and let's say time between the 1st url and scroll down to the second with timer of 3 second .
2) How to make also the mouse click on certain button on that website what is the command code for that.
I Thank you for any help.

css:


Code:

        #nav{
                width: 960px;
                margin: 0 auto;
            }
            ul li{
                float: left;
                margin-right:50px;
                list-style: none;
            }
      .sub-menu{
          display: none;
    
      }

jquery code:



Code:

              $(function(){
                ("#nav ul li").hover(function() {
                (".sub-menu").css("display","block");
       });

html code:

Code:

 <div id="nav">
      <div class="left"></div>
      <div class="right"></div>
      <ul>
        <li><a href="/" class="current">Home</a></li>
        <li><a href="/cpanel.html" class="">cPanel</a>
          <div class="sub-menu">
              <h2>test</h2>
              <p>
                  <a href="#">test</a> <a href="#">test</a> <a href="#">test<</a>
              </p>
                <p>
                  <a href="#">test</a> <a href="#">test</a> <a href="#">test<</a>
              </p>
          </div>

i am sorry, i am new of jquery.i want to show the sub nav part when the mouse hover on the `li` part. but my code doesn't work.how to correct it. thank you

My problem is relates to getting part of the text from a div, then pass this on to a variable which then acts upon it.
This is a short summary in detail:
http://jsfiddle.net/defencedog/W9Fsw/
Above simulates a Forum like environment (PHPBB3). here user can't insert html in posts thus a customised BBcode ([doc])is made in which is placed the required src attribute, unique to every SCRIBD document.
The goal is to get the text within the two [doc] & that will be something like (discarding the two BBCodes)
Code:

src="http://www.scribd.com/embeds/2942002/content?start_page=1&view_mode=list&access_key=key-sxlnrfvqu5s22kzi5xb"

then pass it on as a variable named src, which will then replace the contents to achieve desired output.
Notice the two problems
1] how do I select the div upon which the action is to take place I.e that contains [doc]. Remember there occurs other divs as well in a posted message?
2] How do I select the desired text?

Plz do giv me some suggestions

Hi,

I have a bit of a problem and as my javascript is a rather poor I'm struggling to come up with a solution. Basically I need to split the variable "#country" into two parts and call the second half as the "this" value for '#int-dc'. Using '+' as the start point end ending at the end of the string.

For instance 'this' returns 12+44 I want to split it to "12" and "+44" the latter (+44) replacing 'this' in the code below.


Code:

 $(function() { 
  $("#country").change(function() { 
	$("#int-dc").val
		($(this).val());
  });
});

Thanks in advance.

I'm trying to figure out if its possible to get only certain parts of a string like in PHP...

If I have a function like this:
Code:

function getUrl(selectUrl) {

The selectUrl look like this:
index.php?page=test1

Now what I want is to only get a variable with "test1". Thast means I want to extract the page=test1 out of the selectUrl...

Is this possible...?

Hi all I am new here, hopefully someone can assist me with the following...

If I have ../PACKAGES/test/run.html stored in the variable myUrl and I want to extract whatever is between ../PACKAGES/ and /run.html how would I go about it?

I understand that in this instance I could use:

var actualUrl = myUrl.slice(12,16);

but the length of the string is dynamic, the only parts that stay the same are the start (../PACKAGES/) and end (/run.html).

I am new to java-script, so please be kind...any assistance would be much appreciated.

I need to extract a particular part of a string:

Code:

var str=(document.images('flag').src);
<img id="flag" src="../../../../img/ip/041-080/049p.png">

I only want the "041-080/049" part.

It needs to be read from the right, not the left because the preceding left part will vary in length.

How do I approach this?

Hi i need to have when a mouse over a link it will show a window

For a example

link will be Custermers when cursor is on the customer link it show the customernames from the database


help me to do this

plz help me..........................

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?

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.

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();

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 Friends,
I am come with a new query in jQuery. I have a listing form in which the details showed , the View more Details is implemented using Ajax.
When Click "+" sign there is a loading image show First then the Result show there ... It's all working Fine , But I need a way to show Error
I mean some time Server Response is success with Empty String on that time I need to catch same .... I explain code Below:
Code:

 if(proceed) {
	      $.ajax({
		  	type: "POST",
		  	data: "key="+id,
		  	dataType: 'json',
		  	async: true,
		  	url: "<?php echo site_url(); ?>/server/view_serverdet/",
		  	beforeSend: function() {
	        	$('#view_load'+id).show();
	        	$('#view_load'+id).addClass(class);
	  		},
	        complete: function(){
                      	
	        		$('#view_load'+id).hide();
	        	}
	        },
		  	success: function (server_msg) {
		  		if (null == server_msg) {
		  			var warning = "<font color=\"red\">Unable to load server details</font>";
                	$('#view_load'+id).html(warning);
				} else {
					
                       // Working Fine!
                               }

But that error Just Show and Hide ... How I can show that Error there, If you have any idea , pls help me ASAP...

Thankfully
Anes P.A