my .flexslider content does not display in Wordpress - javascript

I added Flexslider to a wordpress theme.
Flexslider works just fine in my HTML mockup, but when implemented into the Wordpress theme, its now not showing any content within the ".flexslider" class selector.
From the frontend it looks as if ".flexslider" has "display: none" property.
Im not using the Wordpress plugin from Woothemes
My integraton looks like this:
<script defer src="<?php bloginfo('template_url'); ?>/flex/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
slideshow: true,
controlsContainer: ".flexslider",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- Syntax Highlighter -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/flex/js/shCore.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/flex/js/shBrushXml.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/flex/js/shBrushJScript.js"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php bloginfo('template_url'); ?>/flex/jquery.flexslider.js">\x3C/script>')</script>

Looks like you need to use a jQuery no conlict wrapper.
jQuery(document).ready(function($) {
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
slideshow: true,
controlsContainer: ".flexslider",
start: function(slider){
$('body').removeClass('loading');
}
});
});
});

Related

Datepicker and Image Slider conflict

Could you please help me sort the issue out.
After inserting datepicker code, now my imageslider does not appear. All i see is a white space.
I think some javascripts are conflicting ?
But cannot find out which one.
Please help me.
<script type="text/javascript" src="js/jquery.min.js" ></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
};
</script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : 'layerslider/skins/',
skin : 'florida',
navStartStop : false,
thumbnailNavigation : 'hover',
hoverPrevNext : true,
responsive : true,
responsiveUnder : 1200,
thumbnailNavigation : false,
sublayerContainer : 1200
});
});
</script>
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
<script defer src="js/jquery.flexslider-min.js"></script>
First of all, write some neat code and check it.
script type="text/javascript" src="js/doubletaptogo.js" ></script>
Should be:
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
Then, when i look at your HTML, it looks like you are loading jQuery twice? And always load your stylesheets first, you can read this topic why: Is the recommendation to include CSS before JavaScript invalid?
Also, check if the plugins you are using, are compatible with jQuery 1.4.2 it is possible they are using some things that jQuery 1.4.2 doesn't offer.

camera slider, nivo lightbox - jQuery conflict

I have a problem when I using slider and nivo lightbox together in one php file.
Ok, I have this code:
<script type="text/javascript" src="js/slider/jquerySlider.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
});
</script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/jquery.min.js"></script>
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('a').nivoLightbox();
});
</script>
Now it's working only Nivo Lightbox, slider doesn't work. If I delete row with
src="js/nivoLightbox/jquery.min.js, slider now working and the lightbox doesn't.
I think that jQuerySlider.min.js is another version of jquery.min.js. In general, all two scripts are some versions of jQuery library. When I both delete and replaced it one, the newest, it still doesn't work.
Please can anyone rewrite this code to working solution?
you can find your solution below..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
$('a').nivoLightbox();
});
</script>

Jquery TypeError - "$(...).whatever is not a function" when loading two libraries

Please, I need some help with this.
This is the code piece that is failing
<!-- Begin Photofolio library -->
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="scripts/jquery-coin-slider.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#portfolioslider').coinslider({
width: 480,
height: 280,
navigation: false,
links: false,
hoverPause: true
});
$("#tabcontainer").tabs({
event: "click"
});
});
</script>
<!-- End Photofolio -->
<!-- Begin REDX -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
And when I load the page, it shows me this error:
TypeError: $(...).coinslider is not a function
I have tried to use "jQuery" identifier, but it didn't work. I don't know if I did ir right, since I just replaced all "$" with "jQuery" and didn't do more than that.
What is wrong in my code?
Regards
When you use two different versions of jquery (which is not recommended), you can use jQuery.noConflict api.jquery.com/jQuery.noConflict/
I would suggest to check your src="scripts/jquery-coin-slider.min.js" to check what function makes it work. Maybe .coinslider is not inside that js file.

Adding 2 jQuery scripts into 1 file

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous'
});
});
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(function() {
$('a. lightbox').lightBox();
});
</script>
</script>
The problem: When i use the code in separate files files, it works just fine, but when i add the lightbox to the carousel script or vice versa. Both of them stop working.
I just started using jQuery and plugins. Ran into a problem and i don't quite know how to fix it, or whats wrong. I want to have a carousel and a lightbox in my website, but whenever i add the script, it goes, it stops working.
Got the source files for the lightbox from http://leandrovieira.com/projects/jquery/lightbox/ and the jquery library from the jquery website. for both the carousel and the lightbox.
Reply will be much appreciated.
Now the lightbox only works but not the carousel
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous'
// choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<script type="text/javascript" src="js/jquery.js"></script><script
type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>

IE8 error with javascript file which has jQuery functions?

I'm getting this error in IE8:
Page Error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.5;. NET CLR 1.1.4322;. NET CLR 2.0.50727;. NET CLR 3.0.04506.30;. NET CLR 3.0.4506.2152;. NET CLR 3.5.30729;. NET4.0C)
Timestamp: Wed, 1 Sep 2010 11:15:04 UTC
Message: Object does not support this property or method
Row: 10
Character: 2
Code: 0
URI: http://widerdesign.com.tw/wp-content/themes/starkers/js/custom.js
custom.js:
$(document).ready(function () {
//easy slider
$('ul.sf-menu').superfish();
//easy slider
$("#slider").easySlider({
auto: true,
continuous: true
});
//fancybox
$("a#showcase1").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase2").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase3").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase4").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase5").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase6").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase7").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase8").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
$("a#showcase9").attr('rel', 'gallery').fancybox({
'scrolling' : 'no',
'titleShow' : false
});
});
head tags in header.php
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
* We filter the output of wp_title() a bit -- see
* twentyten_filter_wp_title() in functions.php.
*/
wp_title( '|', true, 'right' );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/slider.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/superfish.css" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
included js files on footer:
</div><!-- #footer -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.5.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
</body>
</html>
any suggestions?
The code is properly working on Chrome and Firefox (as expected)
You are including jQuery twice, which will wipe out any plugins defined on it since it defines $ and $.fn (before document.ready fires). To fix it only use one version of jQuery (multiple versions in a page do not play nicely, they're not designed to).
I think your footer should look like this overall:
</div><!-- #footer -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.5.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>
</body>
</html>
I would start by removing the extra references to superfish and jquery. IE may be handling those differently than the other browsers.
Here's what I think it should look like:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.5.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>
It looks like you haven't included the jQuery file as well? It needs to appear on your page as an include above the line that includes your own file.

Categories