Home : Forums : Authoring and Programming : Multi click reveal script

Multi click reveal script

You are currently not logged in. You can view the forums, but cannot post messages.

12-Apr-13 13:24

Delete

Edit

JMorris

No stars yet

Posts: 1

From: Boca Raton, FL USA

I have three images that once each as been clicked a DIV will become visible.

Clicking the image again will do nothing. One click per image.

If they don't click on all the images, they won't see the DIV.

Any clues on how to code this? It must be simple but my Javascript skill is limited. I'm stuck! Please help!

13-Apr-13 07:57

Delete

Edit

chrishirst

Gold

Posts: 851

From: Blackpool, Lancashire, England

Create a new object with three properties, one for each image.
http://www.w3schools.com/js/js_obj_intro.asp

Set the property for each image when clicked. (use function(this) to pass the image object reference

Check the properties.

When all three are true show the element.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

14-Apr-13 12:32

Delete

Edit

JMorris

No stars yet

Posts: 1

From: Boca Raton, FL USA

Thanks for the reply! I'm still struggling with this. Here is the code:


<script>
tile=new Object();
tile.one=1;
tile.two=1;
tile.three=1;

var i=1;document.getElementById('tile'+i);

function()
{
	if (tile === 3)	
	{
		$("#showMe").style.display = block;
	}
}

</script>
</head>
<body>

<img src="tile.jpg" width="217" height="217" id="tile1" />
<img src="tile.jpg" width="217" height="217" id="tile2" />
<img src="tile.jpg" width="217" height="217" id="tile3" />
<div id="showMe" style="display:none;">test</div>

I know I'm on to something but missing the mark. I'm not connecting things is what I'm thinking.

30-Apr-13 00:23

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@JMorris: Set your function up to be a click handler for each of the 3 images. Within the function, the keyword 'this' should hold the HTML element (img) that was clicked on, which you can query to work out its id or src.

Then set the appropriate tile property to true, or whatever value you want to use to signify a click, then test if all 3 properties are true.

You might also find it easier / less fiddly to use jQuery for this sort of thing...

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/