I am using animate.css for my Web site and i used a bootstrap carousel slider it is searched on google and placed in my website. Its working fine But after that my animate.css is not working properly means all animated elements in the HTML page are animating when page loading.
ex: i am using fadeInRight animated class below the page but it is not working when i am going to page down and when i refresh the page at that particular element its working fine. please solve this
please check the site
If you want to Reveal Animations When You Scroll, this is what you're looking for:
http://mynameismatthieu.com/WOW/
CSS animations cannot be delayed based on the scroll position. So, first, you'll need to download and include the wow.min.js file to your page like this:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
And then add the animation to your html element by adding the class 'wow' followed by the animation name in animate.css:
<section class="wow slideInLeft">
</section>
For more advanced options related to timing the delay etc, refer: http://mynameismatthieu.com/WOW/docs.html
You can use wow.js for animating elements when it's on viewport area.
HTML:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
CSS:
<link rel="stylesheet" href="css/animate.css">
js:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
check the jquery plugin wow.js
Related
Is it possible to force an element (lets say a div) atop every single other element as well as fullscreen (from video tag/iframe).
At the moment I'm trying with:
position: absolute
z-index: 2147483647
But it doesn't seem to go over fullscreen. (Tested on Chrome - 61.0.3163.100)
Why do I want to do this?
I want to display a kind of Notification I guess over fullscreen, so when they are watching an embed youtube video on the site, I can show them a notification that they normally wont see and might miss when in fullscreen.
It seems this has changed since recent releases of chrome as other SO answers proceed to give the suggestion I tried above and it has worked for them. Seemingly chrome changed something stopping this from working.
Seems to actually be because im trying to do this with a Angular Material component and for some reason something doesnt allow this to occur.
After checking it seems chrome doesn't even change anything to do with z-index in :-webkit-full-screen yes setting z-index on the fullscreen item and/or the div, wont work still.
Minimal, Complete and Verifiable example:
https://jsfiddle.net/ea3rbmo4/
Updated: https://jsfiddle.net/bw2ytwwb/
This one shows you exactly whats wrong, the red div goes in front, but the md-toast fails to.
<html ng-app="app">
<head>
<!-- AngularJS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<style>
md-toast {
z-index: 2147483647!important;
position: absolute!important;
}
</style>
<!-- Angular Controllers -->
<script>
var app = angular.module('app', ['ngMaterial', 'ngAnimate']);
app.controller('body', ['$scope', '$mdToast', function($scope, $mdToast) {
$mdToast.show(
$mdToast.simple()
.textContent("Test123")
.position('top right')
.hideDelay(999999)
);
}]);
</script>
</head>
<body ng-controller="body" layout="column" layout-align="center center" layout-fill style="background:#22282b">
<video controls="" autoplay="" name="media" type="video/mp4" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</body>
</html>
<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>
Even after changing width to 100%, it doesn't make it responsive. I am embedding this graph on WordPress website.
Put div around that iframe (as parent element), and set CSS "transform: scale(0.5)" to that div.
<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>
It will resize whole frame, including its content.
I have done a bit of looking around on the web for you and have several solutions. One of the most popular seems to be to use JQuery in order to resize the iFrame correctly.
A link to the script is found here: jQuery Responsive iFrame's
<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
var ri = responsiveIframe();
ri.allowResponsiveEmbedding();
</script>
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
;(function($){
$(function(){
$('#myIframeID').responsiveIframe({ xdomain: '*'});
});
})(jQuery);
</script>
From there just make the iFrame have an ID of myIframeID or simply change the text in the script above to accommodate this.
Should this not work for you I would suggest using my Google Search string to finding other possible solutions: responsive iframe width
Good Luck!
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
I've made a website using WordPress. The problem is the blank slide after the last image. I've checked in Firefox firebug there is not any blank slide or script in code but it is shown in the original site.
Any known solution then help me out.
I just noticed you have this line
<script type="text/javascript" src=".../wp-content/themes/twentyten/js/startstop-slider.js"></script>
and then you have the same code again inside that page
<div id="detail_slider">
<script language="javascript">
...
...
</script>
Try removing that external startstop-slider.js file from the page. Maybe they are interfering with each other.
i am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.