JavaScript - Faq Drop-down A When Q Is Clicked?

I want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page).
When it got clicked again, the div will dissapear by sliding out from the page.
Any suggestions?

Thank You.

Hi, I am currently working on a website with a custom livesearch. The livesearch is a simple <ul> under the input box. I am trying to make it so that if the user click anywhere other than the input box(id=searchInput) or the list(id=searchResults). I tried an onblur on the input box, but when the user clicks on the list it vanishes, which defeats the object!

Any help would be much appreciated

Hi everyone! I need a little help with something. I have a page with several links that when clicked open a modal window. The same window for each link, with a form. However inside the form I need to print the id of the link that was clicked. Like so:

<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

<form>
....somehow print/echo the id of the link...
</form>

Is this possible? Does anyone know how to do that? I'd appreciate any help!

I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow:

1 Door phone
1.1 Ready Kits
1.1.1 Audioset
1.1.2 Videoset
1.2 Audio Kits
1.2.1 Elphone
1.2.2 Video Door phone
2 CCTV
2.1 Camera
2.1.1 Dome Camera
2.1.2 IP Camera
2.2 Others

Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened.

I hope it will be possible to achieve this and i would be helped. I can also provide with the javascript if required.

Can a checkbox do 2 different things after it is clicked?

Right now I am using this...
Code:

<input type="checkbox" onclick="processCheckbox(this);">
<input type="checkbox" onclick="activLink(this.checked)">

I don't want to have 2 checkboxes on my page, just 1 and get the same result.

Is this possible?

Chad

Hey all, I would like to get the id of a html check box when the client clicks it. I want to do this on the client side so i need to use java script. I want to be able to do this in both fire fox and ie

window.event.srcElement works great for ie but not for firefox

please do not tell me to use Event.target for firefox because that does not work. At least it is not working for me anyway.

Thanks

Hello, I am just going through my javascript book and looking/learning at examples. I've copied this code and i'm thinking i could really use this in my site, it's something i've been looking for on the internet for a while.

I have a few questions regarding certain things and I would like to slightly change the code so it performs an additional task.

I have uploaded a live example of the page as it is a lot easier for you guys to help and also easier for myself to explain properly. The file is located he JS test page.

As you can see, you click the different tabs and the relative information comes up.

1)How can I change the code so that if one description is currently on-screen, when another tab is clicked, i want to hide the currently displayed information, and show the relative information to that particular tab.

2)As you can see, clicking the tabs just brings up text saying 'Description for Tab' + #. This is added using the DOM, but i want to add a lot of description and obviously do not want to put an awful lot of text into the function. What is the best way to add this content dynamically? Should I create an XML file and access this file using javascript to display the different information?

I understand question 2 could be done using ajax and php but I know nothing about either so i was wondering if there was another way to achieve this?

Thank you for your time,

Regards,

LC.

I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code:
Code:

<div id="isclickable">
klasdlkasdklaklsjd
<div id="weeeee">
trolololololol
</div>
</div>
<div id="isclickable">
klasdlkasdklaklsjd
<div id="weeeee">
trolololololol
</div>
</div>

The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids?

Thanks>

I have no clue if this is in the correct forum but.... is there a way to determine whether a user clicked on a link vs typed in the url to get to a page? I'm trying to stop users from messing with GET forms (and i have to use them, POST wouldn't make sense in this case).

Thanks

hi,
the following function shows a list of Counties populates by a PHP page:
Code:

$.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){
    var myhtml = '<ul>';
   for(i=0; i<data.length; i++) {
      myhtml += '<li>' + data[i].County + '</li>';
   }
   myhtml += '</ul>';
   $("#countyshow").html(myhtml);

});

I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!)

at the moment, when a user clicks on a County this function is passed:
Code:

function gopublist(event)
{
var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout
stackLayout.setCurrentView('view4'); 
}

So, passing a value through so I can modify the SQL in the PHP page to filter the counties?!

Please help?

Hello

I need to not publicly display phone number inside my website page (I use Joomla CMS). In fact the main goal is of course to be able to show the number but not to be crawled by search engine..

So in practice instead to see this:

Phone: 013456789

I would like to see this:

Phone: Click here for see the number

By clicking on that link the number must be displayed...

My website for display the phone field use this php code:

Code:

<?php echo $CustomFields->field('my_phone',$listing); ?>

I asked in some forum and some people tell me is possible to customize this php code with javascript for let me hide/show the field value but I don't have a single idea how to do this because I'm not a programmer...

I take a look in all javascript libraries but I don't find any javacript ready for use for let me implement it inside the php code...

Anybody have a suggestion please ?

many thank

Hi,
I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail.
Can someone please help me on this?
Code:

<table width="816" height="303" border="1">
  <tr>
    <td width="396" height="297">&nbsp;</td>
    <td width="404" valign="top"><table width="100%" border="1">
      <tr>
        <td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
        <td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
        <td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
    </table></td>
  </tr>
</table>

Hi, I have an "offline" html demo of 50+page - so it needs to run on standard html/javascripts...

I'm trying to do this:

Page A
Code:

<a href="pageb.html?endpage=pageD.html">Page B.html</a>
<a href="pageb.html?endpage=pageE.html">Page B.html</a>
<a href="pageb.html?endpage=pageF.html">Page B.html</a>

Page B
Code:

<a href="PageC.html?endpage=(the parameter of page A)">Page C</a>
<a href="(the parameter of page A)">End Page</a>

Page C
Code:

<a href="(the parameter of page A)">End Page</a>

I've searched for a couple of hours already and I just can't seem to find this... I'm not that great at javascripts... Thanks a lot!

Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.

Here is the code relevant to my issue:

HTML:
Code:

<div id="faqBox">
	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
	 <ul>
		 <li><a href="#" onclick="">What is the purpose of this website?</a></li>
		 <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
		 <li><a href="#">Why was this award created?</a></li>
		 <li><a href="#">How do we nominate somebody?</a></li>
		 <li><a href="#">How are people presented with this award?</a></li>
	 </ul>
</div>
<div id="faqInfoBox">
	 <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>

CSS:
Code:

#faqInfoBox {width: 40%;
             border: 5px ridge;
			 height: 310px;
			 background: #606626;
			 float: right;
			 margin-right: 3%;}
			 
#faqBox ul li{font-family: trebuchet ms;
              line-height: 30px;
			  list-style-type: square;}

JS:
Code:

var imgArray = new Array(4);

     imgArray[0] = 'images/content1.png';
     imgArray[1] = 'images/content2.png';
     imgArray[2] = 'images/content3.png';
     imgArray[3] = 'images/content4.png';
     imgArray[4] = 'images/content5.png';
	 
	 var currIndex = 0;
 
     function imgChange(that)
     {
	 if(currIndex < myImages.length - 1) {
         that.src = myImages[++currIndex];
         }else {
         currIndex = 0;
         that.src = myImages[currIndex];
         }
     }

The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look.

I don't want to be fed the answer but just some pointers/tips on what I could do.

I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created).

I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me.

Thank you very much in advance if anyone can help.

Regards,

LC.

Hi all,

I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state.

Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.

Take a look at a basic example I've mocked up, and see the code below:



CSS:

Code:

#navlist {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	font-weight:bold;
	list-style:none;
}
#navlist a {
	display:block;
	width:155px;
	color:#fff;
	text-decoration:none;
	background:url(../images/tab.gif) no-repeat;
	padding-top: 7px;
	padding-right: 4px;
	padding-bottom: 6px;
	padding-left: 10px;
}
#navlist a:hover { 
    background-position:0 -29px;
    color: #1e5ebd;
}
#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}

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=iso-8859-1" />
<title>Test Page</title>

<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />




<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>

</head>



<body>



	<!-- Tour Box Begins Here -->
	
	<div id="box">
	
		<div id="titleBar"></div>
		
		<div id="content">
		
			<div id="menu">
			
				
				
				
				<ul id="navlist">
					<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
					<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
					<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
				</ul>

				
					
			</div>
			
			<div id="videoDisplay">
				  <object id=flashMov1
					classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
					width="233" height="156">
					<param name="movie" value="sb-main.swf" />
					<param name="quality" value="high" />
					<param name="SCALE" value="exactfit" />
					<embed src="sb-main.swf"
					width="233" height="156" name=flashMov2 quality=high
					type="application/x-shockwave-flash"
					pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
				  </object>
			</div>
		
		</div>
		
	</div>

	<!-- Tour Box Ends Here -->


</body>

</html>