bxSlider is not working on IE10, it is working fine in IE8 and IE9,
it is working on IE10 on mode:'fade' but not working on 'horizontal' all mode of bxSlider are working on Mozilla and Chrome.
Where is Problem
My Code for use bxSlider is
$('#slidesfMovieShowcase').bxSlider({
mode: 'horizontal',
controls: false,
pager: true,
autoHover: true,
auto: true
});
I know that this question is outdated a bit but very similar code is working for me in ie10 but inside jQuery ready function:
$(document).ready(function() {
$('#slidesfMovieShowcase').bxSlider({
mode: 'horizontal',
controls: false,
pager: true,
autoHover: true,
auto: true
});
});
IE10 is very picky on HTML errors.
as the first answer says, it should run inside a
$(document).ready(function() {
Some people experience the first image not loaded with a IE10 which freaks me out.
My experience is different:
I work with IE8/9/10 and also the
$(document).ready(...)
wasn't good; it doesn't work fine 5 times over 10! :(
At now, I've tried to put the bxslider code inside a
$(window).bind('load', function(){})
snippet and it works well 9 times over ten ...
You could try this approach ...
I had the same problem and fixed just removing the defer attribute.
Also you want to make sure to include the library first and then put your script
Before - this did not work in IE and Edge
<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.min.js" defer="defer"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 850,
auto:true,
pause:3500,
useCSS:true
});
});
</script>
After - this works in IE and Edge
<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 850,
auto:true,
pause:3500,
useCSS:true
});
});
</script>
I solve my issue by downgrade the bxslider from v4.2.12 to v4.1
Related
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 :)
owl.carousel.js plugin used for jquery slideshow, at the first time this slide show work correctly but when I open a new tab in firefox or chrome, I see that auto play slideshow not working.
Demo : http://minimoviez.info/
Demo : https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 5,
loop:true,
margin: 10,
autoplay: true,
stopOnHover : false,
autoplayTimeout: 1000,
responsive:false,
dots: false
});
$('.play').on('click', function () {
owl.trigger('play.owl.autoplay', [1000])
});
$('.stop').on('click', function () {
owl.trigger('stop.owl.autoplay')
});
});
This bug has been reported and has been fixed in the new version. bug reported link
Just update the script to the latest version.
This link:
Owl Carousel v2.3.0
I think you just need to remove the trigger by clicking "play" and "stop" buttons that you don't have.
Maybe you'll need to keep owl.trigger('play.owl.autoplay', [1000]); in your document ready function.
Try it. Right now i cannot download the plugin to try.
my problem was solved by this code
setInterval(function(){ owl.trigger('stop.owl.autoplay');
owl.trigger('play.owl.autoplay', [1000]); }, 24000);
i don't know that why this problem accord , but by this code was resolved
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.
I have following sample of code i want to open video in a fancybox it works fine almost across all browsers except when i try to test it in IE 8 standard mode.
It works fine in IE 9 and above.
Based on this solution i added following line of code but this doesn't make it work either iframe: { preload: false }
HTML Deceleration code is as
<!DOCTYPE html >
<html lang="en">
<head id="Head1" runat="server">
<title></title>
.........
Sample Code
<div class="video-icon">
<img src="coorporate-video-icon.jpg"/>
</div>
$("a.fancybox-video").fancybox({
width: 600,
height: 440,
closeClick: true,
hideOnOverlayClick: true,
type: 'iframe',
iframe: { preload: false // fixes issue with iframe and IE
}
});
I am not sure what breaks it i cant create a fiddle example as fiddle doesn't work in IE 8 any help in this regard is appreciated.
UPDATE: i tried it with fancybox Version 2.1.3 but i still face the same problem..
it doesn't work doesn't really tell what the problem is.
If it didn't even work with v2.1.3, then you may have other issues. This is your check list for troubleshooting IE:
Make sure you have a proper DOCTYPE, and the DOCTYPE is the first line of your html document so IE won't switch to quirks mode.
Make sure you are wrapping your custom script inside the .ready() method.
Make sure you are using the right fancybox options
Make sure you don't have any extra trialing comma after the last option
Check for other script conflicts (syntax errors of other scripts may stop fancybox from working)
Make sure you don't have any other js error. Check IE isn't showing this icon (bottom-left corner of the browser) :
Otherwise, this html
<img src="coorporate-video-icon.jpg"/>
and this jQuery code, both work fine in IE[7-9] using fancybox v1.3.4 :
jQuery(document).ready(function ($) {
$("a.fancybox-video").fancybox({
width: 600,
height: 440,
hideOnContentClick: true, // closeClick: true, // this for v2.x
hideOnOverlayClick: true,
type: 'iframe'
});
}); // ready
See DEMO at http://www.picssel.com/playground/jquery/youtubeEmbedIframe_07jan14.html
Hey I'm trying to do a simple popup in prettyPhoto, but getting errors in IE9 and Chrome.
I've upgraded to the latest version of prettyPhoto and the latest jquery, nothing changed.
Also tried using jQuery in noConflict mode, but that didn't work either.
This is the errors in the respective consoles:
IE:
SCRIPT5007: Invalid operand to 'in': Object expected
jquery-1.8.0.min.js, line 2 character 2299
Chrome:
Uncaught TypeError: Cannot use 'in' operator to search for 'marginTop' in undefined jquery-1.8.0.min.js:2
and my prettyPhoto script is this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
autoplay: true,
wmode: 'opaque',
theme: 'facebook',
deeplinking: false,
social_tools: false
});
});
</script>`
I've looked around everywhere for a solution to this, can't find anything!
Anyone had this issue before?
I have the same bug with my own script.
It seems that there's a bug in new jQuery 1.8.0.
Try to switch back to jQuery 1.7.2 - it worked for me.