jqueryhtmlcssflexslider
Flexslider slides won't show on Firefox and Chrome Canary
The issue doesn't show up with any other browsers. I have posted the relevant HTML and CSS code. Are there any obvious issues with the code here?
Flexslider in Firefox
Flexslider in IE
Here is the relevant portion of the HTML slide portion of the code:
<section class="wrapper padding50">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Latest Blog Posts</h2>
<div class="row recent-posts">
<div class="flexslider" data-plugin-options='{"directionNav":false, "controlNav":false, "animation":"fade", "animationLoop":true, "slideshow": true}'>
<ul class="slides">
<li>
<div class="col-md-12">
<article>
<h4>
<a href="blog_Article.asp?the-internet-of-things-and-edi" onClick="ga('send', 'event', 'Blog', 'Clicked', 4);">Random Stuff</a>
</h4>
<span><i class="fa fa-calendar"></i> December 10, 2014</span>
<p>Text</p>
<!--<div class="post-meta">
<span><i class="fa fa-user"></i> By
<a href="blog.asp?author=2">
Author
</a> </span>
<span><i class="fa fa-tag"></i>
<a href="blog.asp?kw=44">Text, </a>
<a href="blog.asp?kw=51">Text, </a>
<a href="blog.asp?kw=1">More Text</a>
</div>-->
<a href="blog_Article.asp?stuff" class="btn btn-xs btn-main-color" onClick="ga('send', 'event', 'Blog', 'Clicked', 4);">
</a>
</article>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
Here is the CSS code:
/* ---------------------------------------------------------------------- */
/* Flexslider Elements
/* ---------------------------------------------------------------------- */
.slides li {
position: relative;
}
#carousel li {
margin-right: 5px;
}
#carousel li img {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #D0D0D0;
cursor: pointer;
}
.flex-direction-nav a:before {
font-size: 20px !important;
}
.flex-control-paging li a.flex-active {
background: rgba(0, 0, 0, 0.4) !important;
}
.flex-control-paging li a {
background: rgba(0, 0, 0, 0.2) !important;
}
.flex-control-nav {
bottom: auto !important;
margin-top: 10px !important;
position: relative !important;
}
.flexslider {
background: url("assets/") no-repeat scroll center center #FFFFFF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
position: relative;
}
#carousel {
margin-top: 5px;
}
div.flexslider {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
margin: 0;
}
.flex-direction-nav a {
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: color 0 ease-in !important;
transition: none !important;
background: #222222;
border: none;
font-weight: normal;
margin: 0;
opacity: 0.5;
width: 26px !important;
height: 26px !important;
line-height: 26px;
color: #FFFFFF !important;
text-align: center !important;
text-shadow: none !important;
}
.flex-direction-nav a.flex-next {
right: 10px !important;
font-size: 9px;
}
.flex-direction-nav a.flex-next:before {
font-family: "fontawesome" !important;
content: "\f105" !important;
}
.flex-direction-nav a.flex-prev {
left: 10px !important;
font-size: 9px;
}
.flex-direction-nav a.flex-prev:before {
font-family: "fontawesome" !important;
content: "\f104" !important;
}
Here is the Javascript:
var win = $(window), body = $('body'), scroll_top = win.scrollTop(), screen_height = win.height(), screen_width = win.width(), navbar_height = $('.navbar').outerHeight(), logo_font_size = Math.ceil(parseInt($('.navbar-brand').css('font-size'))), min_height = 40, size = [], navigation_position_top = $('.navbar').position().top, navbar = $('.navbar'), navbar_brand = $('.navbar-brand'), isMobile = false;
// Debounce Function
(function($, sr) {
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function(func, threshold, execAsap) {
var timeout;
return function debounced() {
var obj = this, args = arguments;
function delayed() {
if(!execAsap)
func.apply(obj, args);
timeout = null;
};
if(timeout)
clearTimeout(timeout);
else if(execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
};
// smartresize
jQuery.fn[sr] = function(fn) {
return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
};
})(jQuery, 'clipresize');
//Main Function
var Main = function() {
//function to detect mobile or explorer browser and its version
var runInit = function() {
if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
var ieversion = new Number(RegExp.$1);
if(ieversion == 8) {
isIE8 = true;
} else if(ieversion == 9) {
isIE9 = true;
}
};
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
isMobile = true;
body.addClass('isMobile');
};
navbar_brand.contents().filter(function() {
return this.nodeType !== 3;
}).each(function(i) {
if($(this).is('img')) {
size[i] = Math.ceil(parseInt($(this).height()));
} else if($(this).css('font-size')) {
size[i] = Math.ceil(parseInt($(this).css('font-size')));
}
});
};
var runDropdownToggle = function(func, threshold, execAsap) {
if(isMobile == false) {
$('.dropdown-toggle').dropdownHover({
delay: 0
});
}
};
//Window Resize Function
var runWindowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
screen_height = win.height();
screen_width = win.width();
if(screen_width < 979) {
$('.navbar-default').removeAttr('style');
navbar_brand.removeAttr('style');
navbar_brand.contents().filter(function() {
return this.nodeType !== 3;
}).each(function(i) {
$(this).removeAttr('style');
});
} else {
navigation_position_top = $('#topbar').outerHeight();
}
runElementsPosition();
animateElements();
});
};
//Set all Animated Elements
var setAnimations = function() {
$('.animate-group').each(function() {
$(this).find('.animate').each(function() {
runElementsAnimation($(this));
});
});
$('.animate-if-visible').each(function() {
runElementsAnimation($(this));
});
};
//Search Box Function
var setSearchMenu = function() {
$('.menu-search > a').bind('click', function(e) {
if($('.search-box').is(":hidden")) {
$('.search-box').css({
scale: 0.8,
opacity: 0,
display: 'block'
}).transition({
scale: 1,
opacity: 1
}, 200, 'easeOutBack');
} else {
$('.search-box').transition({
scale: 0.9,
opacity: 0
}, 200, 'easeInBack', function() {
$(this).hide();
});
}
return false;
e.stopPropagation();
});
$('.menu-search').bind('click', function(e) {
e.stopPropagation();
});
$('html').click(function() {
if($('.search-box').is(":visible")) {
$('.search-box').transition({
scale: 0.9,
opacity: 0
}, 200, 'easeInBack', function() {
$(this).hide();
});
}
});
};
//Function to shrink navigation menu when scrolling down
var runElementsPosition = function() {
scroll_top = win.scrollTop();
screen_height = win.height();
new_navbar_height = navbar_height - scroll_top;
if(isMobile == false && screen_width > 979) {
new_logo_font_size = logo_font_size * navbar.outerHeight() / navbar_height;
if(navigation_position_top > 0) {
sticky_navigation();
}
if(scroll_top == 0) {
navbar.css({
'height': navbar_height,
'line-height': (navbar_height - 2) + 'px'
});
navbar.find('.navbar-nav').children('li').children('a').css({
'height': navbar_height,
'line-height': (navbar_height - 2) + 'px'
});
body.css({
'padding-top': navbar_height + $('#topbar').outerHeight()
});
navbar_brand.css('font-size', logo_font_size + 'px');
navbar_brand.contents().filter(function() {
return this.nodeType !== 3;
}).each(function(i) {
if($(this).is('img')) {
$(this).css({
'height': size[i] + 'px',
'width': 'auto'
});
} else if($(this).css('font-size')) {
$(this).css('font-size', size[i] + 'px');
}
});
} else if(scroll_top < navbar_height && new_navbar_height >= min_height) {
navbar_brand.css('font-size', new_logo_font_size + 'px');
navbar_brand.contents().filter(function() {
return this.nodeType !== 3;
}).each(function(i) {
if($(this).is('img')) {
$(this).css({
'height': Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px',
'width': 'auto'
});
} else if($(this).css('font-size')) {
$(this).css('font-size', Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px');
}
});
navbar.css({
'height': new_navbar_height,
'line-height': (new_navbar_height - 2) + 'px'
});
navbar.find('.navbar-nav').children('li').children('a').css({
'height': new_navbar_height,
'line-height': (new_navbar_height - 2) + 'px'
});
body.css({
'padding-top': new_navbar_height + $('#topbar').outerHeight()
});
} else {
navbar.css({
'height': min_height,
'line-height': (min_height - 2) + 'px'
});
navbar.find('.navbar-nav').children('li').children('a').css({
'height': min_height,
'line-height': (min_height - 2) + 'px'
});
body.css({
'padding-top': min_height + $('#topbar').outerHeight()
});
new_logo_font_size = logo_font_size * navbar.outerHeight() / navbar_height;
navbar_brand.css('font-size', Math.ceil(new_logo_font_size) + 'px');
navbar_brand.contents().filter(function() {
return this.nodeType !== 3;
}).each(function(i) {
if($(this).is('img')) {
$(this).css({
'height': Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px',
'width': 'auto'
});
} else if($(this).css('font-size')) {
$(this).css('font-size', Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px');
}
});
}
}
};
//Set of functions to manage the animations of the elements
var animateElements = function() {
if($('.animate-if-visible').length) {
$('.animate-if-visible').appear();
$(document.body).on('appear', '.animate-if-visible', function(e, $affected) {
// this code is executed for each appeared element
var element = $(this);
var animationOptions = element.data('animation-options');
runAnimationTransition(element, animationOptions);
});
}
if($('.animate-group').length) {
$('.animate-group').appear();
$(document.body).on('appear', '.animate-group', function(e, $affected) {
var element = $(this);
var animationInterval = 200;
if( typeof $(this).data('animation-interval') !== 'undefined') {
animationInterval = parseInt($(this).data('animation-interval'));
}
var totalAnimations = 0;
var elements = [];
element.find('.animate').each(function(n) {
elements[n] = $(this);
totalAnimations++;
});
runAnimationGroup(elements, totalAnimations, 0, animationInterval);
});
}
// Force appear. This is suitable in cases when page is in initial state (not scrolled and not resized)
$.force_appear();
};
var sticky_navigation = function() {
if(scroll_top == 0) {
navbar.css({
'top': navigation_position_top + 'px'
});
} else if(scroll_top > navigation_position_top) {
navbar.css({
'top': 0
});
} else if(scroll_top < navigation_position_top && scroll_top > 0) {
navbar.css({
'top': navigation_position_top - scroll_top + 'px'
});
}
};
var runAnimationGroup = function(element, totalAnimations, actual, animationInterval) {
if(actual < totalAnimations) {
var animationOptions = element[actual].data('animation-options');
setTimeout(function() {
runAnimationTransition(element[actual], animationOptions);
actual++;
runAnimationGroup(element, totalAnimations, actual, animationInterval);
}, animationInterval);
}
};
var runElementsAnimation = function(element) {
var animationOptions = element.data('animation-options');
if( typeof animationOptions == 'undefined') {
animationOptions = new Object;
animationOptions.animation = "Fade";
}
switch (animationOptions.animation) {
case 'scaleIn':
element.css({
opacity: 0,
scale: 0.6
});
break;
case 'scaleToBottom':
original_height = element.height();
element.data('original-height', original_height).data('original-width', element.width()).css({
opacity: 0,
transform: 'translateY(-' + original_height / 2 + 'px); scaleY(0.001)'
});
break;
case 'scaleToRight':
original_width = element.width();
element.data('original-height', element.height()).data('original-width', original_width).css({
opacity: 0,
transform: 'translateX(-' + original_width / 2 + 'px); scaleX(0.001)'
});
break;
case 'scaleToTop':
original_height = element.height();
element.data('original-height', original_height).data('original-width', element.width()).css({
opacity: 0,
transform: 'translateY(' + original_height / 2 + 'px); scaleY(0.001)'
});
break;
case 'scaleToLeft':
original_width = element.width();
element.data('original-height', element.height()).data('original-width', original_width).css({
opacity: 0,
transform: 'translateX(' + original_width / 2 + 'px); scaleX(0.001)'
});
break;
default :
element.css({
opacity: 0
});
break;
}
};
var runAnimateProgressBar = function() {
if($('.animate-bar').length) {
$('.animate-bar').appear();
$(document.body).on('appear', '.animate-bar', function(e, $affected) {
$(this).progressbar({
display_text: 'center',
use_percentage: true
});
});
}
};
var runAnimationTransition = function(element, animationOptions) {
if( typeof animationOptions == 'undefined') {
animationOptions = new Object;
animationOptions.animation = "fadeIn";
}
var animationType = animationOptions.animation;
var animationDelay = animationOptions.delay;
var animationDuration = animationOptions.duration;
var animationEasing = animationOptions.easing;
if( typeof animationType === 'undefined') {
animationType = "fadeIn";
}
if( typeof animationDelay === 'undefined') {
animationDelay = 0;
}
if( typeof animationDuration === 'undefined') {
animationDuration = 300;
}
if( typeof animationEasing === 'undefined') {
animationEasing = 'linear';
}
switch (animationType) {
case 'scaleIn':
element.transition({
opacity: 1,
scale: 1,
duration: animationDuration,
delay: animationDelay,
easing: animationEasing
});
break;
case 'scaleToRight':
case 'scaleToLeft':
element.transition({
opacity: 1,
transform: 'scaleX(1)',
duration: animationDuration,
delay: animationDelay,
easing: animationEasing
});
break;
case 'scaleToBottom':
case 'scaleToTop':
element.transition({
opacity: 1,
transform: 'scaleY(1)',
duration: animationDuration,
delay: animationDelay,
easing: animationEasing
});
break;
default:
animationDuration = animationDuration / 1000 * 2 + 's';
animationDelay = animationDelay / 1000 * 2 + 's';
element.css({
opacity: 1,
'animation-fill-mode': 'both',
'animation-duration': animationDuration,
'animation-delay': animationDelay,
'animation-name': animationType
});
break;
}
};
// Function to display an icon on the images on hover
var runImageOverlay = function() {
if($('.image-overlay').length && !$('body').hasClass('isMobile')) {
$('.image-overlay').hover(function() {
$(this).transition({
opacity: 0.7
}).find('.circle-icon').css({
rotate: '-90deg'
}).transition({
rotate: '0deg',
easing: 'easeOutBack'
}, 400);
;
}, function() {
$(this).transition({
opacity: 0
});
});
}
};
// function to initiate FlexSlider
var runFlexSlider = function(options) {
$(".flexslider").each(function() {
var slider = $(this);
var defaults = {
animation: "slide",
animationLoop: false,
controlNav: true,
directionNav: false,
slideshow: false,
prevText: "",
nextText: ""
};
var config = $.extend({}, defaults, options, slider.data("plugin-options"));
if( typeof config.sync !== 'undefined') {
var carousel = {
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
prevText: "",
nextText: "",
asNavFor: slider
};
var configCarousel = $.extend({}, carousel, $(config.sync).data("plugin-options"));
$(config.sync).flexslider(configCarousel);
}
// Initialize Slider
slider.flexslider(config);
});
};
// function to handle SlideBar Toggle
var runSideBarToggle = function() {
$(".sb_toggle").click(function() {
sb_toggle = $(this);
$("#slidingbar").slideToggle("fast", function() {
if(sb_toggle.hasClass('open')) {
sb_toggle.removeClass('open');
} else {
sb_toggle.addClass('open');
}
});
});
};
// function to handle Scroll Top button
var runScrollTop = function() {
scroll_top = win.scrollTop();
scroll_top_button = $('#scroll-top');
if(scroll_top > 300) {
scroll_top_button.fadeIn();
} else {
scroll_top_button.fadeOut();
};
scroll_top_button.off("click").on("click", function(e) {
$("html, body").animate({
scrollTop: 0
}, "slow");
e.preventDefault();
});
};
// function to be activated when you scroll the page
var runWindowScroll = function() {
$(window).scroll(function(e) {
runScrollTop();
runElementsPosition();
});
};
//Set of functions for Style Selector
var runStyleSelector = function() {
$('.style-toggle').bind('click', function() {
if($(this).hasClass('open')) {
$(this).removeClass('open').addClass('close');
$('#style_selector_container').hide();
} else {
$(this).removeClass('close').addClass('open');
$('#style_selector_container').show();
}
});
setColorScheme();
};
var setColorScheme = function() {
$('.icons-color a').bind('click', function() {
$('.icons-color img').each(function() {
$(this).removeClass('active');
});
$(this).find('img').addClass('active');
$('#skin_color').attr("href", "assets/css/theme_" + $(this).attr('id') + ".css");
});
};
//function to save user settings
var runSaveSetting = function() {
$('.save_style').bind('click', function() {
var clipSetting = new Object;
clipSetting.skinClass = $('#skin_color').attr('href');
$.cookie("clip-front-setting", JSON.stringify(clipSetting));
var el = $('#style_selector_container');
el.block({
overlayCSS: {
backgroundColor: '#fff'
},
message: '<img src="assets/images/loading.gif" />',
css: {
border: 'none',
color: '#333',
background: 'none'
}
});
window.setTimeout(function() {
el.unblock();
}, 1000);
});
};
//function to load user settings
var runCustomSetting = function() {
if($.cookie("clip-front-setting")) {
var loadSetting = jQuery.parseJSON($.cookie("clip-front-setting"));
if($('#style_selector').length) {
$('#skin_color').attr('href', loadSetting.skinClass);
};
};
};
//function to clear user settings
var runClearSetting = function() {
$('.clear_style').bind('click', function() {
$.removeCookie("clip-front-setting");
$('.icons-color img').first().trigger('click');
});
};
//function to activate the Tooltips, if present
var runTooltips = function() {
if($(".tooltips").length) {
$('.tooltips').tooltip();
}
};
//function to activate the Popovers, if present
var runPopovers = function() {
if($(".popovers").length) {
$('.popovers').popover();
}
};
return {
//main function to initiate template pages
init: function() {
runInit();
animateElements();
setSearchMenu();
runDropdownToggle();
runFlexSlider();
sticky_navigation();
setAnimations();
runImageOverlay();
runAnimateProgressBar();
runWindowScroll();
runWindowResize();
runTooltips();
runPopovers();
runStyleSelector();
runElementsPosition();
animateElements();
runSideBarToggle();
runScrollTop();
runSaveSetting();
runCustomSetting();
runClearSetting();
}
};
}();
Solution
Make sure you're initializing the plugin properly with a function such as this:
$('#myId').flexslider();
That said, I'm not sure why it works in one browser and not others.
- How can I see the event that is attached to an html element?
- Is there a way to find the event handlers of an element with Javascript?
- Get all events handlers attached to an element
- How to submit an HTML form without redirection
- How to get only directly contained text in DOM element in Javascript?
- Merging URLSearchParams back into URL object
- jsRender and paging
- Disable zoom on input focus in Android webpage
- Pagination and filter script almost ready
- jQuery.submit is deprecated as of 3.3 what's the alternative?
- Filtering and paging
- Javascript fastest way to remove Object from Array
- jquery client side paging on an associative multidimensional array
- How to hide or show a column after a jquery data table AJAX callback
- How can I get overflow on y-axis with JQuery's DataTables?
- Show popup after user in the page more than 15 seconds
- Set selected option of select box
- little issue in jquery paging code
- Uppercase first letter of variable
- Get selected variation price in jQuery on Woocommerce Variable products
- How store all DataTable's data in javascript array after column search?
- EventListener not being removed
- How can I how one div and hide multiple others with jQuery?
- How can I hide one div and show another with jQuery?
- open vimeo url in colorbox using jQuery filter
- Failed to execute 'atob' on 'Window'
- Improve table paging logic
- Javascript: How to read a hand held barcode scanner best?
- dynamic row numbering after add/delete using jquery
- Selected text event trigger in Javascript