locked
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.

    Saturday, September 21, 2013 5:22 AM
  • Thanks Kraig.

    I finally found out the way and I provide here the code to help others

    function 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(); } }

    This worked me thanks @kraig

    N.P.SARAVANA KUMAR

    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.

    Saturday, September 21, 2013 5:22 AM
  • Thanks Kraig.

    I finally found out the way and I provide here the code to help others

    function 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(); } }

    This worked me thanks @kraig

    N.P.SARAVANA KUMAR

    Monday, September 23, 2013 11:31 AM