Develop Reference

Lottie file animation doesn't show

After rendering after effects file to data.json and lottie.js file even I add script and linked lottie file in website animation doesn't show up but in demo it comes. Can you folks check whether I have done some thing wrong with the coding.
<script src="lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container:document.getElementById('bm'),
renderer:'svg',
loop: true,
autoplay:true,
path:'data.json'
})
</script>

bxSlider reloadSlider() is undefined after page load

I'm working on an intime upload+refresh gallery (AJAX and jQuery based)
application.
I can upload multiple images with drag & drop and after uploading. I have to see how will look like the new gallery with the uploaded elements, which is in a bxslider based carousel (without page reload). I've done this successfully with the upload-refresh part. However when refreshing the slides the bxslider attributes from configuration are being lost.
When I want to use the reloadSlider() function I see the following error in Chrome console:
Cannot read property 'reloadSlider' of undefined
$(document).ready(function() {
$('.gallery_output').bxSlider({
slideWidth: 222,
minSlides: 1,
maxSlides: 5,
pager: false,
slideMargin: 0
});
});
function refresh_slider() {
var sliderToRefresh = $('.gallery_output').bxSlider({
auto: true,
controls: true
});
sliderToRefresh.reloadSlider();
}
UPDATE:
I added a button to trigger the event, but got the same error.
$('#refresh').click(function(){
var sliderToRefresh;
sliderToRefresh = $('.gallery_output').bxSlider({
auto: true,
controls: true
});
sliderToRefresh.reloadSlider();
});
Overall I just want to reload the bxSlider with a triggered function, without page reload. Any ideas why the reloadSlider() doesn't work?

You're defining the bxSlider in .gallery_output then trying to access it on #gallery_output :)

Uncaught TypeError: owl.owlCarousel is not a function

Before anything else, let me say that I have looked at other similar questions here and I still can't figure this out.
I'm trying to build a website, using .NET MVC (razor) using a this free template I found online.
What I did, was to replace all the markup of my Index.chstml view with the html code of the template. Moved all the scripts and css files to the corresponding folders in my solution, and changed the html to correctly reference the new paths as required.
Needless to say that the original template works perfectly. But for some reason I really can't figure out I'm getting the error:
Uncaught TypeError: owl.owlCarousel is not a function
I looked at the developer tools (chrome) and the scrips are there, so the only thing I can think of is something related to the loading order. Off course I didn't change that, so I wonder if razor did it somehow.
This is how my script loading section looks like:
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("~/Scripts/owl.carousel.min.js")"></script>
<script src="#Url.Content("~/Scripts/main.js")"></script>
and the problem happens inside main.js, right here:
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
autoHeight: true,
smartSpeed: 500,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
navText: [
"<i class='icon-arrow-left2 owl-direction'></i>",
"<i class='icon-arrow-right2 owl-direction'></i>"
]
});
Thanks to everyone in advance.

Well, I feel a bit ashamed, but looks it was just a conflict between the scripts that the template uses, with the ones MVC razor includes by default.
I commented this at the Layout partial view:
##Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")#
and voila! I realized that my code was loading more scripts than the original template.
Thanks everybody.

How to make a slider autoscroll using jquery

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex

You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});

you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

pagify.js and reloading / refreshing div

Newbie here, so please forgive me if this is a simple question:
I've got a single-page website using pafigy to hash the urls. When the page is first loaded, it pulls in the "home.html" file into the content div.
The "home.html" content contains scripts (jquery cycle) that need to run when it is loaded into the "content" div of the index page. If I link to the cycle plugin and jquery libraries in the "home.html" page, it loads into the "content" div VERY slowly. So, I load the libraries on the main page and reference them in the "home.html" page.
It works fine when the site is initially loaded; however, if I click another menu item and then try to return to "#home" (either with the back button or with a link to "#home"), it loads the content from "home.html", but doesn't load the cycle plugin.
So, I know I need to refresh/reload the javascript in the "content" div, but I'm not sure how to go about doing that. Any help or words of wisdom would be greatly appreciated.
Here's the pagify script on the index.html page:
<script type='text/javascript'>
$(document).ready(function() {
$('#content').pagify({
pages: ['home', 'food', 'wine'],
animation: 'fadeIn',
'default': 'home',
cache: true
});
});
</script>
And here is the Jquery Cycle script on the home.html page:
<script type='text/javascript'>
$(document).ready(function() {
$('#myslides').cycle({
fx: 'fade',
speedIn: 1000,
speedOut: 200,
delay: 1200,
cleartypeNoBg: true
});
$('#myslides2').cycle({
fx: 'scrollLeft',
speedIn: 700,
speedOut: 500,
delay: 1000,
cleartypeNoBg: true
});
});​
</script>
Again, forgive me if my code is wonky or if I'm doing this completely wrong. I'm trying to learn as best I can and research, but I'm really stuck here.
Also, let me know if you need more code.
Thanks!

I think you have to fire Cycle after you load that page. Perhaps you can achieve that with the onChange option present on pagify.js. It should look something like this:
<script type='text/javascript'>
$(document).ready(function() {
$('#content').pagify({
pages: ['home', 'food', 'wine'],
animation: 'fadeIn',
'default': 'home',
cache: true,
'onChange': function(home) { //wrap 'onChange' in quotes
$('#myslides').cycle({
//Your Cycle Plugin Goes Here
});
}
});
});
</script>
Hope this idea helps.