Answered by:
How to Hide and show a set of imageson a Single click in HTml5?

Question
-
I am working on a HTML5 windows app in wwhich a screen has a 3 images on up,leftand right side as shown in the image below marked with red.
All I want to hide that three images on a single click by sliding out the images when the button is clicked. Please provide me code on how to do it using HTMl5/javascript
N.P.SARAVANA KUMAR
Friday, September 20, 2013 11:08 AM
Answers
-
You should make the diffImage function the one to call hide, but name it something like showImages and pass in a true/false depending on whether you want to show or hide the images, then use a different offsets array depending on that flag.
That is, your button just has:
onclick="diffImage(this);"
diffImage looks like this:
function diffImage(img) { if (img.src.match("images/on_btn.png")) { console.log('Low'); img.src = "images/off_btn.png"; showImages(false); } else { console.log('up'); img.src = "images/on_btn.png"; showImages(true); } }
Change hide to be:
function showImages(show) { var image1 = document.getElementById("image2"); var image2 = document.getElementById("image3"); var image3 = document.getElementById("image4"); var images = [image1, image2, image3]; var offsets; if (show) { offsets = [ /*** CHANGE YOUR OFFSETS HERE TO BE THE RIGHT ONES ***/ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.enterContent(images, offsets).done(); } else { offsets = [ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.exitContent(images, offsets).done(); } }
Please note where you need to set your proper offsets for the enterContent animation, and note that you need to use exitContent animation when hiding.
If you have more questions on this, please refer to the WinJS.UI.Animations documentation or Chapter 11 of my book. It's not typical that others write your code for you on these forums other than providing a direct answer, which I've done.
- Marked as answer by Jamles HezModerator Friday, September 27, 2013 3:09 AM
Saturday, September 21, 2013 5:22 AM -
Thanks Kraig.
I finally found out the way and I provide here the code to help others
This worked me thanks @kraigfunction diffImage(img) { var show; var image1 = document.getElementById("image2"); var image2 = document.getElementById("image3"); var image3 = document.getElementById("image4"); var images = [image1, image2, image3]; var offsets; image1.style.visibility="visible"; image2.style.visibility = "visible"; image3.style.visibility= "visible"; //condition to on or off button and i included hide and display with in these on off else //condition itself
if (img.src.match("images/off_btn.png")) { console.log('Low'); img.src = "images/on_btn.png"; offsets = [ { top: "0px", left: "-200px" }, { top: "-200px", left: "0px" }, { top: "0px", left: "200px" } ]; WinJS.UI.Animation.enterContent(images, offsets).done(); } else { console.log('up'); img.src = "images/off_btn.png"; offsets = [ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.exitContent(images, offsets).done(); } }
N.P.SARAVANA KUMAR
- Marked as answer by Jamles HezModerator Friday, September 27, 2013 3:09 AM
Monday, September 23, 2013 11:31 AM
All replies
-
This is quite easily accomplished with the WinJS animations library.
You can start with WinJS.UI.Animations.exitContent. Assuming that your three images have id's of image1, image2, and image3, and you need to move them 200px left, up, and right, respectively, here's how you'd write that:
var image1 = document.getElementById("image1"); var image2 = document.getElementById("image2"); var image3 = document.getElementById("image3"); var outgoing = [image1, image2, image3]; var offsets = [ { top: "0px", left: "-200px" }, { top: "-200px", left: "0px" }, { top: "0px", left: "200px" } ]; WinJS.UI.Animation.exitContent(outgoing, offsets).done( /* async completed handler here if necessary */)
The API, in short, allows you to combine animations for multiple objects and offsets in one call.
If the exitContent animation itself isn't quite what you want, you can customize the effect using WinJS.UI.executeTransition instead. In that case you'd still pass in the array of elements, but instead of an array of offsets you need to create an array of transition descriptors (objects with delay, timing, etc properties) as the docs for that method show.
You can refer also to the animation library sample for more, as well as Chapter 11 of my free ebook.
Kraig
Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press
Also see second edition preview
Friday, September 20, 2013 7:07 PM -
Thanks for the reply Sir, Its working.
But I want a small correction that I want to hide and display the image when clicking the buttton alternatively.
When I click the button First it should display the images and when I click aain it should hide..
Please Kindly Solve this issue.
N.P.SARAVANA KUMAR
Saturday, September 21, 2013 4:24 AM -
Use the WinJS.UI.Animations.enterContent to reverse the process, or simply do executeTransition again with the reverse values.Saturday, September 21, 2013 4:31 AM
-
The below code is which I used as per your instructions but when I used incoming It throws a error incoming is undefined. and I cannot display the images which i hide out already.
Please See the code if there any error.
I made those images to hide out of the screen already.
All I want is I want to display images on click button and hide when i click again.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TamilKarpom</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <script> function diffImage(img) { if (img.src.match("images/on_btn.png")) { console.log('Low'); img.src = "images/off_btn.png"; } else { console.log('up'); img.src = "images/on_btn.png"; } } function hide() { var image1 = document.getElementById("image2"); var image2 = document.getElementById("image3"); var image3 = document.getElementById("image4"); var outgoing = [image1, image2, image3]; var offsets = [ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.enterContent(incoming, offsets).done } </script> <!-- TamilKarpom references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <img src="images/Title.png" id="full-screen-background-image"/> <img src="images/yellow.png" id="image4" style="; height: 734px; left: 1418px; top: 38px; width: 229px;"/> <img src="images/glow.png" style="" id="full-screen" /> <a href="uyireluthukkal.html"> <img src="images/blue.png" id="image3" style="; left: 4px; top: -232px; width: 880px; height: 276px;"/> </a> <img src="images/red.png" id="image2" style="; width: 220px; left: -274px; top: -12px; height: 734px;"/> <img src="images/title_01.png"style="; left: 330px; top: 58.5px; width: 700px; height: 630px;" /> <img style="; left: 593.5px; top: 636.33px; width: 171px; height: 122.5px;" src="images/off_btn.png" id="image1" onclick="diffImage(this); hide();"/> </body> </html>
N.P.SARAVANA KUMAR
Saturday, September 21, 2013 4:54 AM -
Well of course...your array of image elements is called "outgoing" not "incoming"--you might want to just call that array "images" or something so you don't get confused.Saturday, September 21, 2013 4:57 AM
-
yes but the transition of hide and display not working at the same time..could you please edit my code as I am a new one to develop windows apps.
Thanks kraig
N.P.SARAVANA KUMAR
Saturday, September 21, 2013 5:04 AM -
You should make the diffImage function the one to call hide, but name it something like showImages and pass in a true/false depending on whether you want to show or hide the images, then use a different offsets array depending on that flag.
That is, your button just has:
onclick="diffImage(this);"
diffImage looks like this:
function diffImage(img) { if (img.src.match("images/on_btn.png")) { console.log('Low'); img.src = "images/off_btn.png"; showImages(false); } else { console.log('up'); img.src = "images/on_btn.png"; showImages(true); } }
Change hide to be:
function showImages(show) { var image1 = document.getElementById("image2"); var image2 = document.getElementById("image3"); var image3 = document.getElementById("image4"); var images = [image1, image2, image3]; var offsets; if (show) { offsets = [ /*** CHANGE YOUR OFFSETS HERE TO BE THE RIGHT ONES ***/ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.enterContent(images, offsets).done(); } else { offsets = [ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.exitContent(images, offsets).done(); } }
Please note where you need to set your proper offsets for the enterContent animation, and note that you need to use exitContent animation when hiding.
If you have more questions on this, please refer to the WinJS.UI.Animations documentation or Chapter 11 of my book. It's not typical that others write your code for you on these forums other than providing a direct answer, which I've done.
- Marked as answer by Jamles HezModerator Friday, September 27, 2013 3:09 AM
Saturday, September 21, 2013 5:22 AM -
Thanks Kraig.
I finally found out the way and I provide here the code to help others
This worked me thanks @kraigfunction diffImage(img) { var show; var image1 = document.getElementById("image2"); var image2 = document.getElementById("image3"); var image3 = document.getElementById("image4"); var images = [image1, image2, image3]; var offsets; image1.style.visibility="visible"; image2.style.visibility = "visible"; image3.style.visibility= "visible"; //condition to on or off button and i included hide and display with in these on off else //condition itself
if (img.src.match("images/off_btn.png")) { console.log('Low'); img.src = "images/on_btn.png"; offsets = [ { top: "0px", left: "-200px" }, { top: "-200px", left: "0px" }, { top: "0px", left: "200px" } ]; WinJS.UI.Animation.enterContent(images, offsets).done(); } else { console.log('up'); img.src = "images/off_btn.png"; offsets = [ { top: "24px", left: "-48px" }, { top: "100px", left: "253px" }, { top: "41px", left: "1195px" } ]; WinJS.UI.Animation.exitContent(images, offsets).done(); } }
N.P.SARAVANA KUMAR
- Marked as answer by Jamles HezModerator Friday, September 27, 2013 3:09 AM
Monday, September 23, 2013 11:31 AM