I have created a pop-up window that appears on the viewport as you scroll, and it can also be dragged around.
You can see the code snippet below:
var jq = jQuery.noConflict();
var $el = jq(".Box");
var $btnmini = jq(".sessionCD #btnmin");
var isMini = false; // Panel is minimized.
$el.draggable({
cursor: "grab",
containment: 'window',
drag: function(event,
ui) {
jq(this).css('cursor',
'grabbing');
},
stop: function(event,
ui) {
jq(this).css('cursor',
'grab');
},
});
jq("#btnmin").click(function () {
if (isMini) {
jq('.Box #content #msg').show();
jq('.Box #content #note').show();
isMini = false;
} else {
jq('.Box #content #msg').hide();
jq('.Box #content #note').hide();
isMini = true;
}
});
jq('#btn').click(function() {
$el.show();
});
jq('#btntxt').click(function() {
var i = 0;
for (i = 0; i < 50; i++) {
jq('#txt').append('<p>THIS IS SPARTA!!!</p>');
}
});
jq(window).scroll(function() {
$el.stop().animate({
"top": (jq(window).scrollTop() + 10) + "px"
}, "fast");
});.Box {
cursor: "grab";
position: absolute;
left: 2px;
top: 2px;
width: 300px;
height: auto;
display: none;
margin: 1px;
padding: 2px;
z-index: 100000;
border-width: 1px;
border-style: solid;
border-color: #AAA #CECECE #E6E6E6;
background: none repeat scroll 0% 0% #F1F1F1;
box-shadow: 0px 1px 1px 0px #CECECE inset;
border-radius: 8px;
text-align: center;
}
.Box #header {
height: 20px;
background: none repeat scroll 0% 0% #D4E8CD;
border-bottom: 1px solid #83A478;
color: #416833;
}
.Box #header #title {
text-align: center;
font-weight: bold;
}
.minibtn {
margin-right: 2px;
}
.minibtn:hover {
cursor: pointer;
font-weight: bold;
}
.sessionCD #time {
font-family: Georgia, Times, Times New Roman, serif;
font-size: 19px;
font-weight: bold;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="Box" title="">
<div id="header">
<table cellpadding="0px" cellspacing="0px" border="0px" width="100%">
<thead>
<col width="20px" />
<col width="88%" />
<col width="10%" />
</thead>
<tbody>
<tr>
<td id="piccha">
<img src="dragger.png" />
</td>
<td id="title">
User!
</td>
<td id="btnmin" class="minibtn">
Mini
</td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<p id="msg">text text text
<br/>text text:</p>
<span id="time">Super Numbers 12312</span>
<br/>
<p id="note">The note</p>
</div>
</div>
<button id="btn">show box</button>
<button id="btntxt">add 30 text</button>
<div id="txt">
</div>The functionality is also available on JSfiddle.net
How can I achieve smooth minimization of this window using the "Mini" button? By "minimize", I mean smoothly hiding the #msg and #note elements, followed by a smooth resizing of the window. The same applies to "Maximize", but in reverse for showing.