We Keep Coding

How to make an OnShow event for a Panel with JQuery or JavaScript?

I am trying to make an OnShow event in JQuery or JavaScript for my asp:Panel created with C#. I have been looked everywhere via Google to find out how to start coding such an event. But as far as I can see - there is no more such an eventhandler in JQuery/JavaScript. And it seems for me to be depricated functionality.
So for the moment I do not know where to start or where to end coding a routine which can catch when a asp:Panel changed from Visible=false to Visible=true.
Maybe I have to end up with a workaround - but even with this I do not know where to start or where to end.
My case is that I have a fully functional dialogbox which works perfectly with a drag-routine which can move the dialogbox to a new position - but now I want to store the positions in my database, so that the application can remember the positions for each dialogbox. So all the values to sessionStorage I have plans for moving to my database for each dialogbox. And because of storing the positions to database - I probably need to handle som initial values if the dialogbox not exists in the database. And furthermore get an id from the asp:Panel to handle it later in the windows.onload routine.
My existing JQuery code is as the following - I know that it is very long for SO users - but it works fine... And I hope that it is okay with this.
window.onload = function () {
if (sessionStorage.getItem('DialogboxLevel1Classname') === 'modalPopup ui-draggable ui-draggable-handle ui-draggable-dragging') {
$('#' + sessionStorage.getItem('DialogboxLevel1')).css({ transform: "none", top: sessionStorage.getItem('DialogboxTopLevel1') + "px", left: sessionStorage.getItem('DialogboxLeftLevel1') + "px" });
}
};
$('.no').on('click', function () {
if ($(this).parent().parent().attr('class') === 'modalPopup ui-draggable ui-draggable-handle') {
sessionStorage.clear();
}
if ($(this).parent().parent().attr('class') === 'modalPopupLevel02 ui-draggable ui-draggable-handle') {
// has not been used yet...
}
});
$('.yes').on('click', function () {
if ($(this).parent().parent().attr('class') === 'modalPopupLevel02 ui-draggable ui-draggable-handle') {
if ($('#' + sessionStorage.getItem('DialogboxLevel1')).css('filter') === 'brightness(0.3)') {
$('#' + sessionStorage.getItem('DialogboxLevel1')).css({ transform: "none", top: sessionStorage.getItem('DialogboxTopLevel1') + "px", left: sessionStorage.getItem('DialogboxLeftLevel1') + "px" });
}
}
});
$('.modalPopup').draggable({
start: function () {
var vPageName = document.location.href.match(/[^\/]+$/)[0];
sessionStorage.setItem('DialogboxLevel1Classname', $(this).attr('class'));
sessionStorage.setItem('DialogboxLevel1', $(this).attr('id').toString());
sessionStorage.setItem('DialogboxLeftLevel1', $(this).offset().left.toString());
sessionStorage.setItem('DialogboxTopLevel1', $(this).offset().top.toString());
$(this).css({ transform: "none", top: $(this).offset().top + "px", left: $(this).offset().left + "px" });
},
stop: function () {
var vPageName = document.location.href.match(/[^\/]+$/)[0];
sessionStorage.setItem('DialogboxLevel1Classname', $(this).attr('class'));
sessionStorage.setItem('DialogboxLevel1', $(this).attr('id').toString());
sessionStorage.setItem('DialogboxLeftLevel1', $(this).offset().left.toString());
sessionStorage.setItem('DialogboxTopLevel1', $(this).offset().top.toString());
}
})
$('.modalPopupLevel02').draggable({
start: function () {
$(this).css({ transform: "none", top: $(this).offset().top + "px", left: $(this).offset().left + "px" });
}
});
$('.modalPopup').draggable({
start: function () {
$(this).css({ transform: "none", top: $(this).offset().top + "px", left: $(this).offset().left + "px" });
}
});
$('.modalPopupLevel02').draggable({
start: function () {
$(this).css({ transform: "none", top: $(this).offset().top + "px", left: $(this).offset().left + "px" });
}
});
And my dialogbox is declared in this way:
<asp:Panel ID="panAddAccountYear" runat="server" CssClass="modalPopup" Visible="false" Width="330px">
</asp:Panel>
And my css settings are as following:
.modalPopup {
background-color: white;
border: 3px solid #C6E0B4;
border-radius: 8px;
padding: 0px;
z-index: 20;
position: fixed;
height: auto;
left: 50%;
top: 50%;
margin-left: auto;
margin-top: auto;
transform: translate(-50%, -50%);
user-select: none;
}
.modalPopup .header {
background-color: #C6E0B4;
height: 30px;
color: black;
line-height: 30px;
text-align: center;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modalPopup .body {
padding: 10px;
}
.modalPopup .footer {
background-color: #C6E0B4;
padding: 10px;
}
.modalPopup .yes, .modalPopup .no {
height: 23px;
color: White;
text-align: center;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
}
.modalPopup .yes {
width: 65px;
background-color: #2FBDF1;
border: 1px solid #0DA9D0;
}
.modalPopup .no {
width: 65px;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
As far as I can see I have to implement something in window.onload where I get the initial positions for the dialogbox from an OnShow routine - but maybe it is a wrong place to start coding.
So now I really do not know how to implement a solution for getting the id of the asp:Panel control - so I can handle it later in the window.onload routine.
So my question is: How to get an id from the asp:Panel when the state changes to Visible=true - so I can use the id later i my application?
Thanks in advance.
Best regards
Michael

jQuery scrollTop animate

css
.head {
width: 100%;
left: 0px;
top: 0px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height > 0) {
console.log("no 0");
$("#tt-body-index .head").animate(
{
marginTop: 0,
},
1000,
"swing"
);
} else if (height === 0) {
console.log("0");
$("#tt-body-index .head").animate(
{
marginTop: -76,
},
1000,
"swing"
);
}
});
I'm writing a script using jQuery.
When scrolling starts .head appears and tries to make scrollTop 0 disappear.
.head appearing is good, but when scrollTop is zero, it doesn't become marginTop: -76.

Use CSS transitions and animation whenever possible which is more smooth compared to jquery animations, this can be done using css transition check the below code. Also, one thing you need to trigger scroll on page load in case if the browser scrolls the page to some part from the cache.
CSS
.head {
width: 100%;
left: 0px;
top: -80px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
background-color: aqua;
transition: top 1s;
}
body.showHeader .head{
top: 0px;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height < 76) {
$('body').removeClass('showHeader')
} else {
$('body').addClass('showHeader')
}
}).scroll();

How to toggle a .click easier?

I am working on my final for my webpage development class, I am trying to make a blog themed website. I want to make my code it so that there is a profile picture and when clicked it turns into a box and reveals a bio and some other info. I already have that part done, but now I want to make it so that when the profile picture is clicked again, it will make the box and the info disappear. I understand that there are ways and I have tried some but to no success. When I try .toggle, it just disappears it completely. Any advice would help, thank you
(JSfiddle wasn't working for me, sorry) >
CodePen
JavaScript:
$(document).ready(function() {
$('#picback').click(function() {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
});
});

We're in 2015. Javascript or jQuery is not needed here!
Use CSS transitions and make use of :checked pseudo class. This way you can also easily set an initial state.
Fully working demo: http://codepen.io/anon/pen/mJrvXo
#visibleToggle {
display: none;
}
#picback {
background-color: #B8B8B8;
border-radius: 50%;
width: 230px;
height: 230px;
border: 2px solid white;
margin: 0 auto;
box-shadow: 0 0 5px;
text-align: center;
transition-duration: 0.6s;
}
#picback:hover {
box-shadow: 0px 0px 8px black;
cursor: pointer;
}
#profilepic {
height: 200px;
position: relative;
top: 16px;
left: 2px;
}
#profilepic:hover {
cursor: pointer;
}
#name {
font-family: 'Playball', cursive;
color: blue;
text-shadow: 0 0 3px white;
}
#age {
font-family: 'Pragati Narrow', sans-serif;
font-size: 25px;
}
#bio {
font-family: 'Roboto', sans-serif;
color: white;
}
#info {
opacity: 0;
}
#visibleToggle:checked + #picback {
border-radius: 120px 120px 2px 2px;
height: 460px;
}
#visibleToggle:checked + #picback #info {
opacity: 1;
}
<input type="checkbox" id="visibleToggle" />
<div id='picback'>
<label for="visibleToggle">
<img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic' />
</label>
<div id='info'>
<h2 id='name'>Joshua T. Hurlburt</h2>
<h2 id='age'>15</h2>
<p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
</div>
</div>

This is what I would recommend:
Instead of performing the animations in jQuery on click, give an active class to the picture element when clicked.
Perform your animations with CSS only when the picture has the active class.
Remove the class if you click on the picture element and it exists.
I would love to give you actual code, but since it's for your final, this should give you a good starting place :) Best of luck!

Try utilizing px unit values at css , js ; checking for display property of $("#info") at click of #picback to fade in , fade out #info ; reset #picback css back to initial borderRadius , height
$(document).ready(function() {
var picback = $("#picback")
, info = $("#info");
picback.click(function() {
if (info.css("display") === "none") {
$(this).animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
info.fadeIn('slow');
} else {
$(this).animate({borderRadius:120,height:230}, 'slow');
info.fadeOut('slow');
}
});
});
a {
text-decoration: none;
color: black;
text-align: center;
}
#picback {
background-color: #B8B8B8;
border-radius: 120px;
width: 230px;
height: 230px;
border: 2px solid white;
margin: 0 auto;
box-shadow: 0 0 5px;
}
#picback:hover {
box-shadow: 0px 0px 8px black;
}
#profilepic {
height: 200px;
position: relative;
top: 15px;
left: 5px;
}
#name {
font-family: 'Playball', cursive;
color: blue;
text-shadow: 0 0 3px white;
}
#age {
font-family: 'Pragati Narrow', sans-serif;
font-size: 25px;
}
#bio {
font-family: 'Roboto', sans-serif;
color: white;
}
#info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href='#'>
<div id='picback'>
<img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic'>
<div id='info'>
<h2 id='name'>Joshua T. Hurlburt</h2>
<h2 id='age'>15</h2>
<p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
</div>
</div>
</a>
codepen http://codepen.io/anon/pen/zGKepE

You should use .toggleClass() for click in the image and control the states of bio (for example collapsed and expanded) directly in css.

Here's an example of a very simple solution. Other examples posted already are a bit sexier, but I just used a variable to check whether or not it's open or closed. I also added in the basic closing animation, but you'll want to fiddle with that to make it not terrible. For example I'd suggest resetting the border radius in the callback after the animation function to prevent that ugly oval effect.
$(document).ready(function() {
var dropped = false;
$('#picback').click(function() {
if (!dropped) {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
dropped = true;
} else { // Closing animation
$('#picback').animate({
borderRadius: "50%",
height: "230px"
}, 'slow');
$('#info').fadeOut('slow');
dropped = false;
}
});
});
http://codepen.io/anon/pen/dopaJq

What you can do here is use a closure function that remembers its state:
var clickHandler = (function () {
var isOpen = false;
return function () {
isOpen = !isOpen; // Toggles between true and false
if (isOpen) {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
} else {
// Add close animation here
}
};
})();
$('#picback').click(clickHandler);

Try this code. It adds a class when animated and then checks for it before animating.
$(document).ready(function() {
$('#picback').click(function() {
var $this = $(this);
if($this.hasClass('animated')) {
$this.removeAttr('style').removeClass('animated');
} else {
$this.animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow').addClass('animated');
$('#info').fadeIn('slow');
}
});
});

how can I add animation time to css changes

Is it possible to add a duration of a css change so that when I change the left, top, width and height of a div this could be animated?
In the jQuery code I want to animate the duration of the css properties.
Thanks a lot if you could help me, Its appreciated!
My code
HTML:
<div id="slideshow">
<img class="image1" src="images/car1.jpg"></img>
<img class="image2" src="images/car2.jpg"></img>
<img class="image3" src="images/car3.jpg"></img>
<img class="image4" src="images/car4.jpg"></img>
<img class="image5" src="images/car5.jpg"></img>
</div>
CSS:
#slideshowshadow{
background: yellow;
border-radius: 100px;
width: 700px;
height: 500px;
position: absolute;
opacity: 0.2;
margin: 50px 50px;
box-shadow: 0px 0px 100px 15px yellow;
-moz-box-shadow: 0px 0px 100px 15px rgba yellow;
-webkit-box-shadow: 0px 0px 100px 15px yellow;
}
#slideshow{
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
#slideshow img{
color: white;
}
.image2, .image3, .image4, .image5{
position: absolute;
width: 300px;
height: 200px;
}
.image1{
position: absolute;
width: 350px;
height: 250px;
top: 175px;
left: 225px;
z-index: 2;
}
.image2{
top: 0px;
left: 250px;
z-index: 1;
}
.image3{
top: 200px;
left: 500px;
z-index: 1;
}
.image4{
top: 400px;
left: 250px;
z-index: 1;
}
.image5{
top: 200px;
left: 0px;
z-index: 1;
}
JQUERY (This is where the magic happens :p):
$(".image2").click(function(){
$(".image1").css("top", "0px");
$(".image1").css("left", "250px");
$(".image1").css("width", "300px");
$(".image1").css("height", "200px");
$(".image1").css("z-index", "1");
//middle
$(".image2").css("top", "175px");
$(".image2").css("left", "225px");
$(".image2").css("width", "350px");
$(".image2").css("height", "250px");
$(".image2").css("z-index", "2");
$(".image3").css("top", "200px");
$(".image3").css("left", "500px");
$(".image3").css("width", "300px");
$(".image3").css("height", "200px");
$(".image3").css("z-index", "1");
$(".image4").css("top", "400px");
$(".image4").css("left", "250px");
$(".image4").css("width", "300px");
$(".image4").css("height", "200px");
$(".image4").css("z-index", "1");
$(".image5").css("top", "200px");
$(".image5").css("left", "0px");
$(".image5").css("width", "300px");
$(".image5").css("height", "200px");
$(".image5").css("z-index", "1");
});

You should either use animate where 5000 is the time in milliseconds.
$( ".image5" ).animate({
opacity: 0.25,
left: "+=50",
height: "25px"
// css goes here, last one should not have comma
}, 5000, function() {
// Animation complete.
});
Or to use CSS animations, set the CSS transition time via jQuery:
var time = 5000
$('.image5').css({
'webkitTransition': 'all ' + time + 's ',
'mozTransition': 'all ' + time + 's ',
'msTransition': 'all ' + time + 's ',
'oTransition': 'all ' + time + 's ',
'transition': 'all ' + time + 's '
});

Perhaps you looking for:
transition-duration
see: http://css-tricks.com/almanac/properties/t/transition-duration/ for further details

Position Fixed - Set width to be equal to container

I have been trying to set a div's position to fixed when a user has scrolled far enough. I noticed that when the div's position is set to fixed the width is not the same as the parent elemnt. How can I keep the width of the div with position: fixed the same as the parent element?
In this example I want the bottom div to be the same width as the yellow box once position:fixed is set.
http://jsfiddle.net/BYJPB/
Here's my HTML:
<header>
<div class="filler-space">
Filler Space
</div>
<div class="toolbar">
<div class="current-article">
<div class="progress-bar"></div>
My article
</div>
</div>
</header>
Here's my CSS:
body {
padding:0 10px;
height: 1000px;
}
.filler-space {
background-color: yellow;
border:1px solid #000000;
height: 140px;
}
.toolbar {
border: 1px solid black;
}
.current-article {
font-weight: 600;
height: 100%;
line-height: 40px;
overflow: hidden;
width: 100%;
z-index: -1;
}
.progress-bar {
position: absolute;
}
.prog .progress-bar {
background: none repeat scroll 0 0 #F2F4F7;
bottom: 0;
height: 100%;
left: 0;
margin: 0 -10px 0 -10px;
overflow: hidden;
right: 0;
top: 0;
transition: width 0.1s ease 0s;
z-index: -1;
width: 100%;
}
Here is my JavaScript:
var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');
$(document).scroll(function() {
var scrollTop = $window.scrollTop();
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}
});

Update your js, I dont understand your requirements, but i think this is what you are looking for.
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0,
'width':$header.width()
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}