Function for clicking a link or picture, and it dissappears

General PHP Help
#1

OK so here’s what I am trying to achieve… I want a page with a list of links or png or jpgs, whatever, a list of things on a page, (preferably a list of clickable pictures so I can make them look stylish, and when you click on one of the images or links, it disappears and the rest of the items in the list slide up into place. Very simple. Like checking off items in a list, and you can click each item and whatever is left are things you have not done.

I could easily use flash for this, but I want it to be able to disply on Apple devices as well. Thanks in advance.

#2

Hi there,

You can perform simple effects/animations using jQuery (it’s a JavaScript library – very easy to use). Basically in jQuery you can manipulate HTML elements based on the clicked items (known as selectors) by simply calling jQuery methods such as hide(), show(), fade(), etc.

In your case, you want to hide an image once it’s clicked. Here’s how I would do it:

<html>
<head> 
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("#img1").click(function(){
$(this).hide();
}
$("#img2").click(function(){
$(this).hide();
}
$("#img3").click(function(){
$(this).hide();
}
$("#img4").click(function(){
$(this).hide();
}
);});
</script> 
</head>
<body>
<img src="image1_url" id="img1"/><br/>
<img src="image2_url" id="img2"/><br/>
<img src="image3_url" id="img3"/><br/>
<img src="image4_url" id="img4"/><br/>
</body> 
</html>

This is just a very basic demonstration on how to manipulate HTML elements using jQuery, and of course there’s a much more efficient way to do this.

#3

When you revisit the page are you wanting it to remember what you have left to do?

#4

It won’t be a revisit to remember idea, more like a list you keep in your hand while you are carrying out a set of tasks, and you touch each step of the task while you are doing it, like putting together a bicycle or something, just an example. So it would be perfectly OK if the elements are showing again when the page is refreshed.

#5

Also, Javascript will probably work, but I was hoping there was a php function that hid objects. I will have to test this on iphone and ipad to see if it works. Thanks a ton.

#6

Ok so I tried this, and it did not work. I have it up on a test site at http://www.fridgecritter.com/app

and the images show, but when you click on one of them, it does nothing. Is there a special way to call to the javascript file? Or should it just be in the same directory as the php file? Thanks.

#7

Here’s the working code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#img1").click(function(){
  $(this).hide();
  });
  $("#img2").click(function(){
  $(this).hide();
  });
  $("#img3").click(function(){
  $(this).hide();
  });
  $("#img4").click(function(){
  $(this).hide();
  });
});
</script>
</head>
<body>
<img src="image1.jpg" id="img1"/><br/>
<img src="image2.jpg" id="img2"/><br/>
<img src="image3.jpg" id="img3"/><br/>
<img src="image4.jpg" id="img4"/><br/>
</body>
</html>

Hope it works,

#8

Nope, maybe there is a function that’s needed to make the images clickable? I get no change in the cursor when I hover over the images. Is there a special hover function?

#9

Never mind I figured it out… I didn’t have the permissions set right to run scripts. The second set of code worked. Thanks a ton.

#10

The code works fine for me; it hides the image if clicked. If you want to add special hover effects to the image, you may want to add this css code just before :

<style type="text/css">
img:hover{
opacity:0.5;
cursor:pointer;
}
</style>
#11

It’s fine, it worked fine for me with the second code set. Thanks for the hover code too.

Sponsor our Newsletter | Privacy Policy | Terms of Service