css3 animation using html5 data attribute - javascript

I am trying to use one of the css animation framework called Animate.css in a way that I can effectively manage multiple animations.
I have a markup like the following for example.
<div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"></div>
And jquery as follows
$(function () {
$('div').addClass('animated ' + data('animation'));
});
So when document is loaded the div should start executing fadeInUp animation from the css framework referenced.
In a real context, I would be using jquery scroll plugin to detect the x, y position to find when to fire animation but this is to just get started.
I must have got something wrong, it doesn't do anything.
Here is my JS Fiddle

$(function () {
var $divToAnimate = $("div"); // This will animate all the div elements in doc
$divToAnimate.addClass('animated ' + $divToAnimate.data('animation'));
});
See for instance your Fiddle updated: http://jsfiddle.net/9aE2N/5/

If you do not want to use jQuery you can add the classes (animated fadeInUp):
<div id="foo" class="animated fadeInUp" data-animation="zoomInDown" style="width:100px; height:100px; background-color:#ddd">
</div>

Related

core-scroll-header-panel + jQuery scroll

Using Google Polymer, I am attempting to animate the scrolling of the content of my core-scroll-header-panel with little success. I attempted scroll the the <body> tag like in most classic cases:
$('html, body').animate({
scrollTop: element.offset().top
}, 400);
Does not work.
So I assumed that there is an overlaying scrollable <div> that is being generated. Yet, upon looking through the DOM and attempting the scroll on multiple elements, it had all failed. So, I decided to try the ultimate test:
$('html /deep/ *').animate({
scrollTop: element.offset().top
}, 400);
This works.
So the question is, how do I animate the scrolling of core-scroll-header-panel? Or is there a way to tell which element is being altered by html /deep/ * selector? I attempted something along the lines of this (followed by the second example) without success:
$('html /deep/ *').scroll(function(e) {
console.log(e.currentTarget.id);
}
Nothing returned.
My current setup:
<core-scroll-header-panel flex fit condenses keepCondensedHeader>
<core-toolbar class="tall category-toolbar" slide-down>
<div class="bottom fit-margin">
<div id="pay-tag" inline flex center fit>pay to</div>
<div id="results-user" inline center-center fit>John Doe</div>
</div>
</core-toolbar>
<div class="center-panel" flex auto>
<!-- content that scrolls -->
</div>
</core-scroll-header-panel>
I'm surprised that no one has attempted to give an answer to this, but after some fiddling I managed to find the solution.
Looking through the source with the help of some javascript, I found that core-scroll-header-panel generates a scrollable element in it's shadow DOM refered to as #mainContainer which hold the main content and a #headerContainer which holds the header content.
I used the method I posted earlier with some small changes (polymer-element being your custom node):
// query all possible elements in question
var $this = $('html /deep/ {polymer-element} /deep/ *');
// register scroll event to log id
$this.scroll(function(e) {
console.log(e.currentTarget.id);
});
// begin animated scroll
$this.animate({
scrollTop: 200
}, 400);
This resulted in the events of #mainContainer being logged to the console and ultimately the culprit I have been looking for. So to wrap it all up, the resulting (cross-browser) code would look like this:
var element = $('#myElement');
var scope = this.shadowRoot.querySelector('core-scroll-header-panel');
var scrollable = scope.shadowRoot.querySelector('#mainContainer');
$(scrollable).animate({
scrollTop: element.offset().top
}, 400);
Hopefully this helps out anyone else that encounters this issue, and hopefully Google will add this quirk to it's polymer documentation.

Dynamically resize height of stacked divs?

On my magento homepage, I have a section where I have 3 image collages stacked on top of each other.
I'd like it so that each "collage"/div dynamically resizes its height to that of the browser you opened it in, so that as you scroll down, each one fits the window perfectly.
I tried:
<script type="text/javascript">
$(window).resize(function() {
$('#universe1').height($(window).height() - 46);
});
$(window).trigger('resize');
</script>
and make each div id'd "universe1" but that didn't seem to do the trick.
Any ideas?
Use jquery's .on() method to attach your event handler.
<!-- HTML -->
<div class="universe">1</div>
<div class="universe">2</div>
<div class="universe">3</div>
// jQuery
$(window).on('resize', function() {
$('.universe').height($(window).height() - 46);
});
$(window).trigger('resize');
Working example: http://jsbin.com/IFEPEkaY/1/
Also make sure you're using classes as in the example above, NOT ids like in your code. If you use ids, only the first one will go full screen. If you MUST use ids (this is ugly) the simplest thing is to do this:
<!-- HTML -->
<div id="universe1">1</div>
<div id="universe2">2</div>
<div id="universe3">3</div>
// jQuery
$(window).on('resize', function() {
$('#universe1').height($(window).height() - 46);
$('#universe2').height($(window).height() - 46);
$('#universe3').height($(window).height() - 46);
});
$(window).trigger('resize');
Working example: http://jsbin.com/eboXAXEq/1

Page scrolls up using JQuery fadeIn - fadeOut

Hi I use the following code to create a slideshow with multiple DIV elements:
var $ = jQuery.noConflict();
function fadeContent() {
$(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
$(this).appendTo($(this).parent());
fadeContent();
});
}
fadeContent();
The slideshow works properly but there's a problem. When the delay(2000) trigger a fadeIn-fadeOut, the page scrolls up!
What can I do to prevent this?
I think when the element fades out it does not take a real estate on the page. The element beneath it will take its place and you feel like the page scrolled. You can have a wrapper to the element you are trying to fadeIn/fadeOut and provide an appropriate height to this wrapper element. But this is not a good UX because when the element will fadeOut there will be empty section on the page.
Its because the fadeOut method ends op settings display:none; on the element.
If you force display block in css this will not happen:
Css:
.slideshow .asset-abstract:first-child {
display:block;
}

Drop down interface from top of page using javascript

Quite simply, I want to know how I can do this 'http://www.lido-troon.co.uk/'.
Where it says 'Reserve a table'. This trigger allows a drop down interface to animate as if from above.
I'm not interested in the booking system in there, just the functionality.
I thought it could be done using anchors and smooth scroll, but that would mean the booking form was always there.
I will give you a code that will center this div on the top of the screen on every screen and will slide the div down from the top onLoad:
HTML:
<div id="ID_NAME">Your Content</div>
JQuery:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top","-100px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");return this;
}
$(document).ready(function(){
$('#ID_NAME').center().delay(300).animate({'top' : '0px'});
});
Hope this helped
Create the content and then show it using JQuery:
http://api.jquery.com/show/
You can have the top div with your booking system content hidden with jQuery's hide() than on .click() of the button (a tag), have it slideDown()
Example:
$(document).ready(function() {
$('booking_div').hide();
$('booking_a').click(function() {
$('booking_div').slideDown();
});
});
You can use javascript, Jquery. that have many UI effect. It's good and easy to use. You can learning it from document. e.g. http://www.webdesignersblog.net/coding/20-advanced-jquery-effects/ http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Yes you can,
create div at the top of your page with the style="display: none;" or set class with the css from style attribute. Then attach event click to your link and animate change.
JavaScript
$('#your_link_button').click(function()
{
$("#container").slideToggle('slow');
});
CSS
.hidden { display: none; }
HTML
<body>
<div id="container" class="hidden">your content</div>
...

Div is jumpy with fadeIn jQuery

When I roll over .comptext_rollover div it should hide the initial div on the page and show the minipage div. but it does but is sometimes really jumpy and also the minipage div sometimes shows below the initialpage div. any ideas? sorry i am new to coding! Thanks in advance.
$(document).ready(function() {
$('#mini_page').hide();
$('.comptext_rollover').hover(function() {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}, function() {
$('#mini_page').hide();
$('#initial_page').show();
$('.register_button').show();
$('#container').css({
'margin-top': '-150px'
});
});
});
I prepared a fiddle demo HERE
re-EDIT:
JSFIDDLE DEMO
(the demo may be incorrect while the main CSS is an external link)
I used:
<div id="container">
<div id="initial_page" class="page">
<div id="playvideo_hoverbutton"></div>
<div class="register_button"></div>
<div id="invisible_register2"></div>
<div id="termsandconditionsapplyshort"></div>
</div>
<div id="mini_page" class="page">
<div id="minicar_animated"></div>
<div id="worth25k"></div>
<div class="register_button"></div>
<div id="invisible_register"></div>
</div>
<!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
<div class="comptext_rollover">
<!--<div id="competition_text"></div>-->
</div>
</div>
$('#mini_page').hide();
$('.comptext_rollover').mouseenter(function() {
$('.page').fadeToggle(400);
});
$('.comptext_rollover').mouseleave(function() {
$('.page').fadeToggle(400);
});
In any case what you should do:
Position absolute the 2 screens you need to 'swap' into a container.
Than what you do:
Position the 'rollover' element outside the 'screens'.
Adjust the marginTop of the bigger image(car image) in the CSS (like I did) to fix the buggy 'jumps'.
IF POSSIBLE: ONLY ONE rollover ACTION ELEMENT!
Fix the margin-top of the car image. (give it a -Npx)
Doing so you don't need to do that stuff with positioning your container -Npx
There is also a simpler way to do the same effect:
you add to BOTH screens a class .swappable, making the second one (CSS)display:none; , and than you just use jQuery toggling just this class.
you've not set a great deal of time for the fade in. you're also just hiding some of the divs which makes the fade in move around depending on where you put them. maybe use slides instead. I have saved an example here: http://jsfiddle.net/kBEUH/
$(document).ready(function(){
$('#mini_page').hide();
$('.comptext_rollover').hover(function () {
$('#initial_page').fadeOut(1000);
$('.register_button').fadeOut(1000);
$('#mini_page').slideDown(1000);
}, function(){
$('#mini_page').slideUp(1000);
$('#initial_page').fadeIn(1000);
$('.register_button').fadeIn(1000);
});
});
if you put a console.log in your hover() function, you'll see hover is firing like crazy. This causes the animation to start over and over again, while moving your mouse.
You could take advantage of the jquery :animated selector:
$('.comptext_rollover').hover(function() {
//enable this line to see the hover event is firing every time your mouse moves
//console.log("hovering")
//if the div is in the middle of an animation, do nothing
if (!$("#mini_page").is(":animated")) {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}
}, function() {
//etc
});
EDIT:
Now I think of it, your probably want to use .mouseenter() and .mouseleave() instead of hover()
$('.comptext_rollover').mouseenter(function() {
//your code
}).mouseleave(function() {
//your code
});

Categories