My question is how to trigger or call a function after an element has been loaded or element on the page and don't want to wait for the full page load.
Example Fiddle: http://jsfiddle.net/8bJUc/275/
Problem Fiddle: http://jsfiddle.net/8bJUc/274/
Call JS:
document.getElementsByClassName("owlCarousel").onLoad = function(){
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
};
HTML:
<span class='slide'>
<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has been loaded -->
<div>
<!-- Contents -->
</div>
</div>
</span>
So i mean that if .slide has .owl-carousel class then call function will be work.
Expecting suggestions?
The div is loaded almost inmediately when the body loads. It has no onload event and the only way to execute a script just after it finished loading is appending the script just after it in the DOM (as some other answers suggested).
Fiddle with this option implemented.
Note that you need to wrap the script in the header of your page in order to make things work (look at the jsfiddle options I set)
In your HTML it'd look like
<head>
... rest of your stuff ...
function launchScript() {
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
}
</head>
And then:
<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has loaded-->
...
</div>
<script>
launchScript();
</script>
How about this:
$(function(){
if ($('.slide .owl-carousel').length){
//call function
}
});
If it needs to be done as soon as possible, you could manually invoke it immediately after the element it relies on is defined.
function asap() {
// ...
}
<div id="owl-demo" class="owl-carousel">
<!-- ... -->
</div>
<script>
asap();
</script>
Example fiddle (open your console)
Related
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I am not sure my problem is titles says but When I change the Display: None element to Display: Block, divs not rendering I think. JS files not overwriting the divs. And images not displaying. But when I use the visibility:hidden and visibility: visible feature its works fine. Here my files;
<div id="gnc2"class="row">
<div class="col s3 offset-s1">
<div class="thumbnail">
<img src="galeri/gizemler/1.jpg" alt="Gizemler">
<div class="caption">
<h5 class="center-align">Gizemler</h5>
<p class="center-align">Serideki mitler, gizemler</p>
<p class="center-align"><a id="nbg2" class="waves-effect waves-light btn">Ateşle</a></p>
</div>
</div>
</div>
</div>
<div id="nbg1">
<div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true, "prevNextButtons": false, "pageDots": false }'>
<img src="galeri/gizemler/1.jpg" />
<img src="galeri/gizemler/2.jpg" />
<img src="galeri/gizemler/3.jpg" />
</div>
</div>
And my script;
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/flickity.pkgd.min.js"></script>
<script type="text/javascript">
$('#nbg2').click(function() {
$("#gnc2").css("display","none");
$("#nbg1").css("display","block");
});
</script>
CSS;
#nbg1 {
display: none;
}
First, you should really put your jQuery code between this :
$(document).ready(function() {
$('#nbg2').click(function() {
$("#gnc2").css("display","none");
$("#nbg1").css("display","block");
});
}
This way you make sure the whole page is properly loaded before applying javascript.
Then, i don't know what your flickity library do exactly but if it plays with your #nbg1 width and height values it may have trouble redefining them if the content of this div is not displayed at all (display: none). If you're forced to use this library while it has no callback method, i suggest you give this trick a try :
In your CSS :
#nbg1 {
visibility: hidden;
}
In your JS :
$(document).ready(function() {
setTimeout(function(){
$("#nbg1").css("visibility","visible");
$("#nbg1").hide();
$('#nbg2').click(function() {
$("#gnc2").hide();
$("#nbg1").show();
});
}, 200);
});
You can use this and play with the delay value (here 200). If your flickity library has some "job done" callback method, i suggest you use this one instead of the timeout trick i wrote here.
Hope it helped.
I have some problem to remove preloader from my html template when i remove code from html file and js file preloader removed but also slideshow not showing up, so please provide proper way to remove preloader from my website, here is the code
Html page code
http://metroz.in/K/
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
and here was js file script
http://metroz.in/K/js/custom.js
$win.load(function(){
$('#status').fadeOut(defaults.speedAnimation);
$('#preloader').delay(defaults.speedAnimation)
.fadeOut(defaults.speedAnimation/2, function() {
that.fSize();
that.activate();
that.sliders();
setTimeout(function(){
that.fMiddle();
}, 10);
setTimeout( function(){
that.fNum();
$('.layer').height(
$doc.height()
);
}, defaults.speedAnimation/2);
that.chars();
that.bars();
that.histLine();
that.headerScroll();
that.ytVideo();
if (!onMobile){
$win.stellar({
horizontalScrolling: false
});
}
});
you can use : $("#preloader").remove(); to remove the div.
Update: this is not loading annything: What is wrong with this code?
<script type="text/javascript" src="http://static.tumblr.com/snscsmd/Z3ln6cev3/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$('#content').infinitescroll({
// infinite scroll settings
}, function(newPosts){
$(newPosts)
.wrapAll('<div class="photoset-grid">') //wrap them in place
.parent() //get .photoset-grid
.photosetGrid({
//photoset grid settings
});
});
</script>
My problem is to combine Infinite Scroll with Photoset Grid. I need a callback but I am not sure how to implement it.
Website: http://sindreolsson.tumblr.com/
HTML
{block:Photoset}
<div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;" />
{block:Photos}
<img src="{PhotoURL-500}"
{block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
width="{PhotoWidth-500}" height="{PhotoHeight-500}"
{block:Caption}alt="{Caption}"{/block:caption} />
{/block:Photos}
</div><!-- /.tumblr-photoset -->
{block:Caption}<div class="photoset-grid-copy">{Caption}</div>{/block:Caption}
{/block:Photoset}
Script:
<!--Photoset-grid script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.photoset-grid').photosetGrid({
rel: $('.photoset-grid').attr("data-id"),
gutter: '0px',
onComplete: function(){
$('.photoset-grid').css({
'visibility': 'visible'
});
}
});
});
</script>
<!-- /Photoset-grid script -->
This should pull the new posts and wrap them in a new div.photoset-grid. At that point you can just call .photosetGrid() with your settings.
$('#content').infinitescroll({
// infinite scroll settings
}, function(newPosts){
$(newPosts)
.wrapAll('<div class="photoset-grid">') //wrap them in place
.parent() //get .photoset-grid
.photosetGrid({
//photoset grid settings
});
});
Previous answer
It's not too clear on Infinite Scroll's repo, but on
infinite-scroll.com you can see the
callback in their second example. Here's a partial solution using
that callback:
$('#content').infinitescroll({
//settings
}, function(newPosts){
//MISSING: reset photosetGrid
$('.photoset-grid').photosetGrid();
});
Unfortunately it seems that an "update" or "reset" method is missing
for Photoset Grid, so perhaps open an issue in their
repo and hope
that if someone adds the functionality, it happens in time.
Alternatively you can look for a different script.
I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>
Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>
The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!