I want to implement a Jquery/JS animation like the Flipboard popup animation.
When user clicks on an image, the image will expand to a certain size and its white background expands until it occupies the whole screen.
Once the animation is done the page content will be loaded.
http://flipboard.com/
Any help regarding this will be appreciated.
Thanks a lot!
Codrops did it a few months back, I can't really write out all the code for you here but give this article a read.
<script>
//Finally I found the answer. This is the full code.
$(document).ready(function() {
$('.box').click(function(e){
if( $('div').hasClass('overlay')==false ){
//event.preventDefault();
var $box = $(this);
$('<div class="overlay"></div>').prependTo($box);
var $overlay = $('.overlay');
$overlay.css( {
'position' : 'absolute',
'background-color' : 'white',
'width' : $box.outerWidth(true),
'height' : $box.outerHeight(true),
'left' : $box.offset().left,
'top' : $box.offset().top,
'z-index' : 99999999
});
//$($placeholder).insertAfter('.box');
$overlay.animate({
width: $(document).width(),
height: $(document).height(),
left: '0px',
top: '0px'
}, 500, function() {
//reset the overlay
$overlay.css({'width': ''});
$overlay.css({'height': '1500px'});
//ajax
$.ajax({
type: "POST",
url: "../ajax/get_event.php",
data: "firstname=clint&lastname=eastwood",
success: function(resp){
// we have the response
$overlay.html(resp);
$('.window').fadeIn(200);
},
error: function(e){
alert('Error: ' + e);
}
});
});
}else{
//click only on overlay to exit
var $target = $(e.target);
if ( $target.is('.overlay') ) {
$('.overlay').remove();
}
}
});//end box click
});//end of jquery
</script>
Codrops have just posted a plugin to do this, and instructions on how to use it. Theres a particularly cool demo of the plugin here.
Related
I have panel which contains huge scrollable data, once scroll down the content and collapse the panel/come from other page then data is setting to top, scroll down remains same, its not resetting to top position.
I have tried below code but no luck
please anybody help me to get resolve this
$('#techAssmnt').on('show.bs.collapse', function (e) {
//setTimeout(function(){
//$("techAssmnt").animate({
//scrollTop: $('#page-top-wrapper').offset().top
//}, 800, 'swing',
//function() {});
//},500);
//$( "div.assessmentMainDiv" ).scrollTop( 0 );
//$("#Section_1").animate({ scrollTop: 0 }, "slow");
$("#Section_1").animate({ scrollTop:
$('#templateCollapse3262').offset().top }, 800, 'swing', function() {
});
//$("div.assessmentMainDiv").css(["top","1px", "left","0", 'right':'0','bottom':'0', 'overflow':'auto']);
$("div.assessmentMainDiv").css({
'top' : '1px',
'left' : '0',
'right' : '0',
'bottom' : '0',
'overflow' : 'auto'
});
});
Below code also I have tried
$('#techAssmnt').on('shown.bs.collapse', function (e) {
//alert("sasdas")
var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;
if ( currentScrollbarPosition > topOfPanelContent - panelHeadingHeight) {
$("#Section_1").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}
});
https://www.bootply.com/8bGdJgkmUv
please check this.. In the first panel there is huge content and also scrollable.. Once I open and scroll the content then I close/hide/toggle the panel but content is not all reset to top
You just need to add this jquery
$(".collapse").on('hide.bs.collapse', function(){
$(this).children().scrollTop(0);
});
Working Snippet
I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/
Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});
I position an element using jQuery .position(). However after I show an animation and cancel it after an ajax call the position of the element gets reset.
function showStatusMsg(msg) {
var $statusEl = $('#userActMenuStatus');
if ($statusEl.length == 0) {
$statusEl = $('<span id="userActMenuStatus">' + msg + '</span>');
$('#app_nav').append($statusEl);
$statusEl.position({
my: "right center",
at: "left center",
of: $('#userActMenu'),
collision: "fit"
}).css('left', parseInt($statusEl.css('left')) - 10);
} else {
$statusEl.html(msg);
}
}
$('#button1').click(function () {
showStatusMsg('saving...');
$('#userActMenuStatus').stop(true).show('drop', {
direction: 'up'
}, 'slow').effect('pulsate', {
'times': 100
}, 1500);
$.ajax({
type: 'post',
url: '/echo/json/',
data: 'save=data'
}).success(function (result) {
$('#userActMenuStatus').stop(true).hide('drop', {
direction: 'up'
}, 'slow');
});
});
http://jsfiddle.net/NhdgM/2/
What is going on?
Disclaimer: I have to use jQuery v1.5.2 and jQuery UI 1.8.12
how are you expecting position to behave? http://api.jquery.com/position/
https://github.com/jquery/jquery/blob/master/src/offset.js#L90
It looks like just a reader to me.
jQuery UI's .show() and .hide() are setting the left CSS value at times and messes up the positioning. I stumbled across this answer which suggested to just use .animate() and set the top CSS value explicitly for the animations. This fixed the problem.
Fiddle
When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.
$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.
Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});
I am creating pagination using Codeigniter, and I want to add ajax functionality. JS is working when pagination link is clicked first time. When it is clicked for the second time JS doesn't work and pagination is working via PHP controller (this part is working without any problem). This is JS code:
var pag = $('#pagination a');
pag.on('click', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});
Also scrollTop doesn't work. What am I doing wrong?
Probably that's because your DOM gets manipulated everytime, and hence the handler for the click event is lost.
try this way :
$('body').on('click', '#pagination a', function(e) {
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({
'opacity':0,
scrollTop: 0
}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({
'opacity':1
}, 400);
});
});
e.preventDefault();
});
this will ensure rebinding the click event on each DOM manipulation
try this bro..
maybe the element was not yet loaded...
var pag = $('#pagination a');
pag.on('click', 'a', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});