How to make element minimized or hidden in site?

0

What is the name so I can search as it does, of those items in html that appear minimized on the page. for example:

In an html site in your home on the right side near the window bar has a cropped image that when you click on it it slides to the left and shows it complete.

If it has not been clear, I'll look for some website with that and put the image. Thanks

    
asked by anonymous 08.11.2017 / 19:15

1 answer

2

You can use css and jquery, I'll give an example here, in this example when clicking the div it appears on the screen.

First you "hide" it using css:

.janela{
  width: 100px;
  height: 100px;
  border:1px solid #f00;
  margin-top: -90px;
  position:fixed;
}

And then you show using jquery:

$(function(){
  $( ".janela" ).click(function() {
    $(this).animate({
      marginTop: 0
    }, 1500 );
  });
});

Result: link

Update:

In this way the screen appears when clicking and hides when clicking again, it checks the margin-top and performs the action:

$(function(){
alert($(".janela").css('margin-top'));
  $(".janela").click(function() {
    var pos = parseInt($(this).css('margin-top').replace("px", ""));
        if(pos == 0){
        $(this).animate({
        marginTop: -90
      }, 1500 );
    }else{
      $(this).animate({
        marginTop: 0
      }, 1500 );
    }
  });
});

Result: link

    
08.11.2017 / 19:22