Learn VBA & Macros in 1 Week!

JavaScript - How To Create An Onclick Show?

Full Excel VBA Course - Beginner to Expert

How To Create An Onclick Show?	View Content

Hey all

Quick question, how do I create a onclick show item? For example, if I am creating a FAQ page and want it to show the question, and then click on the question to have the answer appear below the question, how would I do that?

Any examples for this type of thing?

Thanks

Full Excel VBA Course - Beginner to Expert

Onclick, Create Php Variable And Echo Out

Similar Tutorials

View Content

I have a form, that when the user click Submit, I need a php variable to be echoed to the page.
This is for an upload page. So when they are waiting for the file to upload, it will say "Uploading..." until the upload is complete.

All I know so far is I need to create a javascript function and include it in the submit button. This is all I have so far in the submit button tag:
onClick="Transferring();"

Now I need to figure out the code to include in this function.

Any ideas?

Show/hide Onclick

Similar Tutorials

View Content

Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
background-color: #CC6;
}

</style></head>
<body>

<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1>JavaScript</h1>
</div>
</div>
</div>
<div id="ie6-container-wrap">
<div id="container">
<DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'"
onmouseout="this.style.fontSize='12pt'">
<div id="content">
<h1>Mainframe</h1>
<p>Enter the content of your website within this area.</p>
</div></DIV>
</div>
</div>
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">

<center>

<body onLoad="dateandtime()">

<script>

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate)
}
if (!document.all)
getthedate()
function dateandtime(){
if (document.all)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>
</center>
</div>
</div>
</div>
</body>
</html>

CSS:
body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #597347;
margin: 0;
padding: 0;
background: #beffbf;
}

h1, h2 {
color: #87ac6d;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

#header-container {
height: 90px;
background: url(../images/banner.jpg) repeat-x left bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #beffbf;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 476px;
top: 32px;
}

#header h1 em{
color: #90b874;
font-size: small;
display: block;
}

#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 35px;
right: 0;
}

#header ul li {
float: left;
margin-right: 5px;
}

#header ul li a{
color: #90b874;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}

#header ul li a:hover {
color: #beffbf;
}

#container {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
padding: 90px 0 40px;
}

#content {
float: left;
width: 100%;
}

#sidebar {
float: right;
width: 275px;
margin-top: 10px;
}

#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

#footer-container {
height: 40px;
background-color: #000;
}

#footer {
width: 940px;
margin: 0 auto;
position: relative;
}

Hide A Div And Show Another Onclick

Similar Tutorials

View Content

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.

Create Calendar Textfields Onclick Problem In Firefox

Similar Tutorials

View Content

Hi, I have the script below working fine in IE but not FF, can any one help me??

The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF

Live demo: http://hotelendenia.com/sandbox/

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>

  <script type="text/javascript">
  function extend(m, e){
    var e = e || this;
    for (var x in m) e[x] = m[x];
    return e;
};
 
function create(type, opt, parent){
    var el = document.createElement(type);
 
    if (opt.style){
        extend(opt.style,el.style);
    }
 
    delete opt.style;
 
    extend(opt,el);
 
    if (parent){
        parent.appendChild(el);
    }
 
    return el;
}
 
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}

  </script>

</head>
<body>

<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
			
</body>
</html>

Onclick Show One Hide The Rest

Similar Tutorials

View Content

hello.... i am needing help writing a function that when onclick it shows a specific element id and hides all the rest of the the ids

i have php code that shows a list of colored boxes and when you click one it changes the color of a div... this works fine as i have used a changecss function... i have these colors in a database with their values and specific color names... what i am trying to do is when a color is clicked it will change the div and also print the color name....

i have made a php loop to print all the color names and i have the display as none... how can i add to the onclick function that changes the color to also put the display of the certain color name to "block" and then if you select another color it hides that one and shows the new color... any help is appreciated! i'm sorry if this is confusing

Hide All Images, And Show Certain Ones Onclick

Similar Tutorials

View Content

Hey guys, I'm new to the forums, so if i post anything wrong let me know.

I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.

here's the script...

<script language="javascript">

function showone(x) {
document.getElementByName('a').style.display='none';
document.getElementByName('b').style.display='none';
document.getElementByName('c').style.display='none';

document.getElementByName(x).style.display='block';
}
</script>

and the code...

<a href="#" onClick="showone('a'); ">show CAT. A</a><br>
<a href="#" onClick="showone('b'); ">show CAT. B</a><br>
<a href="#" onClick="showone('c'); ">show CAT. C</a><br>
<a href="#">show all cats</a><br>

<br>

<img name="a" src="imgs/a1.jpg" /><br>
<img name="b" src="imgs/b1.jpg" /><br>
<img name="a" src="imgs/a2.jpg" /><br>
<img name="a" src="imgs/a3.jpg" /><br>
<img name="b" src="imgs/b2.jpg" /><br>
<img name="c" src="imgs/c1.jpg" />

Here's what it looks like...
http://mattfalcone.com/tests/showhide.html

except the links don't work like they should, and I can't figure out why.

I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it.

Javascript Onclick-show Image + Link??

Similar Tutorials

View Content

So I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret.

It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link.

I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so... any ideas or suggestions?

Hide/show Div Background Image Onclick

Similar Tutorials

View Content

Hey all,

I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load.

I'm clueless as to how to do this.

Here's my code for the image attached:

Code:

<div class="colour-picker">
	<div class="tick-off" id="red" onclick="changeclass();">
	</div>
	<div class="tick-off" id="blue" onclick="changeclass();">
	</div>
	<div class="tick-off" id="black" onclick="changeclass();">
	</div>
	<div style="float: right; margin-right: 6px;">Choose colour:</div>
</div>

CSS:

Code:

.colour-picker {
    float: right;
    margin: 0 10px 0 0;
    line-height: 30px;
    text-shadow: #292929 2px 1px 1px;
    font-size: 15px;
    color: #FFF;
    padding: 0px;
    height: 32px;
    font-weight: normal;
}

.colour-picker #red {
	background-color: red;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #blue {
	background-color: blue;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #black {
	background-color: black;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker .tick-off {
	background-image: none;
}

.colour-picker .tick-on {
	background-image: url(images/colour-tick.png);
	background-repeat: no-repeat;
	background-position: center center;
}

Can anyone tell me how to do it?

Thanks!

Adam

Javascript Hide/show Divs Onclick

Similar Tutorials

View Content

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>

This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Table Row's Onclick To Show/hide An Embedded Div

Similar Tutorials

View Content

I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function. Here is what the outputed html looks like.
Code:

<head>
<script type="text/javascript" language="javascript"> 
function HideShowDiv(divID)
{
	if (document.getElementById(divID).style.display == "none")
	{
		document.getElementById(divID).style.display = "block");
		document.writeln("show "+divID);
	}
	else
	{
		document.getElementById(divID).style.display = "none";
		document.writeln("hide "+divID);
	}
}
</script>
<STYLE> 
<!--
  tr { background-color: transparent}
  .normal { background-color: transparent }
  .highlight { background-color: #dcfac9 }
//-->
</style></head>
<body>
<!-- Start the main body DIV tag -->
<div id="PageBodyFrame" align="center">
<table width="80%">
<tr><td colspan="4">Georgetown Youth Baseball Association</td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD1');">
<td align="left">James Beach</td>
<td align="center">1 Game(s)</td>
<td align="right">$22.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&u=1">Cut Check</a></td>
</tr>

<!-- First hidden div embedded in the next row of main table -->
<tr><td colspan="4">
<div id="HD1" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td></tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Marin vs LBF</td>
<td align="right">\$22.50</td>
</tr></table></div></td></tr>

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD3');">
<td align="left">John Carpenter</td>
<td align="center">0 Game(s)</td>
<td align="right">$1.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&a=3">Cut Check</a></td>
</tr>

<!-- Second Hidden div embedded in table row -->
<tr><td colspan="4">
<div id="HD3" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td>
</tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Assigner Fee</td>
<td align="right">\$1.50</td>
</tr></table></div></td></tr>

<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">\$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->

In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Any thoughts on this would be greatly appreciated. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user.

Show And Hide Onclick Radio Buttons

Similar Tutorials

View Content

Hi,

I have 4 radio buttons with separate div(s)

I need to click on each radio button to show particular div(s) but I am not getting correct result Lease help

HTML Code
----------

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="1" onClick=\"get_radio_value(1);\" >

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="2" onClick=\"get_radio_value(2);\" >

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="3" onClick=\"get_radio_value(3);\" >

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="4" onClick=\"get_radio_value(4);\" >

<div id="div1" style="display:none">
Facilities Management
</div>

<div id="div2" style="display:none">
<div style="font-weight:bold">Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc…
</div>

<div id="div3" style="background-color:#00B0F0;display:none">
Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc…
</div>

<div id="div4" style="background-color:#00B0F0;display:none">
Facilities Management,Contracting, MEP, Hydraulic Valves, Plumping, LV Switching, Fire alarm & Fire Fighting Trading etc…
</div>

JSCode
--------
function toggleLayer(val)
{
if(val == 1)
{
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
}

else if(val == 2)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
}

else if(val == 3)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'block';
document.getElementById('div4').style.display = 'none';
}

else if(val == 4)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'block';
}
}

Body Onload Hide , Problem With Onclick Show

Similar Tutorials

View Content

hi all im trying to hide a div on page load,

ive used this.

Code:

<script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>

and this in the body tag

Code:

<body onload="javascript:hideDiv()">

it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show.

can this be done?

please help if you can this work has to be in soon

Create A Basic Slide Show

Similar Tutorials

View Content

How To Create A Slide Show With Javascript

Similar Tutorials

View Content

i want to create a slide show with javascript, but i don't know how to write a code, i have try full screen image slideshow in javascriptkit.com, but i don't know how to resize, not full screen because i want to insert another think, not only a slide show. how can i make an edit with full screen image slideshow coding?or is there someone can help me with the slide show in javascript, but with fadingtime, not an instant change?

Onclick Function Change Src, Name, And Onclick

Similar Tutorials

View Content

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Onclick Disable Onclick

Similar Tutorials

View Content

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

If Image - Show Image Else Show Default Icon?

Similar Tutorials

View Content

How do I show the default icon for pdf, doc, etc... else show the image?
Code:

 
Show the default icon for pdf, doc, etc... else show image. 
Default icon:
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
The image:
'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' +

Attempted javascript onError but only certain browsers support that or it's my code.
Code:

'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' +

Any ideas?

Need Help With Onclick...

Similar Tutorials

View Content

Hello...

Here is an example of a site I'm working on:

http://mrmatthewreese.com/surine/custominlays.php

notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked?

Just curious if anyone can help.

Here is the javascript code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='boldlink';
Lst=obj;
}

/*]]>*/

</script>

<a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br />
<a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br />
<a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br />
<a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br />
<a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br />
<a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br />
<a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br />
<a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br />
<a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br />
<a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a>

Onclick

Similar Tutorials

View Content

<a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" >

Now this showclubs function shows a hidden div and at the end I have a return:false;

but when you click on the link - it still seems to reload to the page and take you to the top

how can I get it to just show the div without seeming to reload the page?

Js Onclick Help

Similar Tutorials

View Content

Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) .

The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem?