I somehow broke my Flexslider galleries: first image loads, but no navigation buttons and no animation.
Here's my site
By loading an old html gallery and testing, I can see that the problem is not within the HTML, since the old page also now displays a broken gallery.
This means the problem is with the js file or with the css style file?
I went through the old and new versions of the js file and everything seems unchanged.
Thanks for any help you can give!
Here is the part that calls the js:
<!-- CSS================================================== -->
<link rel="stylesheet" href="http://www.esthergibbons.com/css/style.css">
<link rel="stylesheet" href="http://www.esthergibbons.com/css/colors/cyan.css" id="colors">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Java Script
================================================== -->
<script src="http://www.esthergibbons.com/scripts/jquery.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.flexslider.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.selectnav.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.twitter.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.modernizr.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.easing.1.3.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.contact.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.isotope.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.jcarousel.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.fancybox.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.layerslider.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.shop.js"></script>
<script src="http://www.esthergibbons.com/scripts/custom.js"></script>
I don't see that you are calling the .flexslider function.
You need to place this in your custom.js file.
$('.flexslider').flexslider({
animation: "slide"
});
Related
I have an issue with yepnope that is driving me crazy, and I spent a good amount of time searching for the answer with no luck.
First, I am using device.js to detect screen size, it will throw an desktop class in the tag if it detects a desktop. On the desktop I want another script to be loaded which will then give functions to a certain class (on mobile devices, the script will not load and the certain classes will remain static.)
However, when yupnope executes, it throws my script on TOP of all the other scripts in my head tag and will not execute and run. I know the script works because I manually put it in on the bottom of my other scripts. My question is how can I make yepnope load the script last instead of putting it on the very top of the other scripts? I have a nagging feeling that this is where a callback comes in but I am still trying to get ahold of javascript!
this is my yepnope code:
$(document).ready(function(){
if ($('.desktop').length !=0) {
yepnope({
load: "js/jquery.malihu.PageScroll2id.js",
});
};
});
This is my html:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
The yepnope condition is in the file scripts.js which executes last but still puts the jquery.malihu.PageScroll2id.js script that is called on top which is wrong order then as shown in this code:
<script src="js/jquery.malihu.PageScroll2id.js"></script> //script on top = BAD!!
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
Is it possible to run something similar on Jquery mobile I don't want to disable ajax calls on links and buttons. Do you know a work around for this problem. Thank you very much. I spend many hours searching for answer, but nothing works for me. I use Jquery 1.8.3 and Jquery mobile 1.2.1 with css include, on PC Jquery works fine, on mobile only if I am on index page, but jquery is in header that i include with SMARTY. I work on SMARTY. I put my javascript code between {literal} tags then between tags but without success. Thank you for your answers.
SMARTY with Jquery inside:
<link href="/js/jquery.mobile-1.2.1.min.css" rel="stylesheet" type="text/css" />
<link href="/css/stylex.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.mobile-1.2.1.min.js"></script>
<script type='text/javascript' src='/includes/flash_fix.js'></script>
<!-- {popup_init src="/javascripts/overlib.js"} -->
<!--[if lt IE 7]>
<script type="text/javascript" src="/ie_png.js"></script>
<script type="text/javascript">
/ie_png.fix('.png');
</script>
<![endif]-->
{literal}
<script type="text/javascript">
$(document).bind('pageinit', function () {
$('#nav ul').hide();
$('#languages').hide();
$('#menu').click(function(e){
e.preventDefault();
$('#nav ul').slideToggle('300');
});
$('#lang_menu').click(function(e){
e.preventDefault();
$('#languages').slideToggle('300');
});
});
</script>
{/literal}
I'm trying to get bootstrap and less.js working but I can't succeed...
I have not worked much with less in the past, so I'm wondering if I'm missing something...
It is runing on a synology server. On runtime it seems to generate the boostrap css as it should "less:sandbox-css-bootstrap" is append to the html but it does'nt get the value from variables.less
Here's my head
<meta charset="utf-8">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet/less" type="text/css" href="css/bootstrap.less">
<script type="text/javascript" src="js/less-1.3.3.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
Does anyone know what am I doing wrong?
Thanx in advance
Change the order of your initialization. Place dependencies above the others. like place bootstrap.less above all other CSS's
I have an html page which calls multiple javascripts and css stylesheets. However some of the functionality of one of the scripts is failing.
The first four scripts and the last two make the buttons and styles look like the iphones.
The middle scripts are for a shadowbox.
I have tried rearranging the scripts but it still doesnt work properly, my shadowbox appears with the image on a new screen.
How to get around this?
Here are my calls:
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<script src="CodeAppDetailScreen.js" type="text/javascript"></script>
<!--Script that doesnt work properly-->
<script src="shadowbox/shadowbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="shadowbox/shadowbox.css" type="text/css">
<script type="text/javascript">
Shadowbox.init();
</script>
<--till here-->
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
</head>
I want to do .jscrollpane scrollbars but they are not showing up, and firebug is not picking up any errors. I'm doing cufon font replacement, a prettyPhoto lightbox, and a simple portfolio filter that sorts ul's. I've looked into jQuery noConflict mode but can't figure out if this is the issue, and if it were, how to use it in my case.
Here's how I'm calling in scripts in the header:
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script src="scripts/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/trajan.font.js" type="text/javascript"></script>
<script type='text/javascript' src="scripts/jscrollpane-1.2.1.js"></script>
<script type='text/javascript' src="scripts/mousewheel.js"></script>
<script type='text/javascript' src="scripts/mwheelintent.js"></script>
And then I use $(document).ready(function(){ to run the prettyPhoto, the portfolio filter, and the jscrollpane scripts before the end of the head. The PrettyPhoto and portfolioFilter work, but the jscrollpane doesn't render any changes, but Firebug doesn't detect any errors either.
The jscrollpane is being applied (using class="scroll-pane") to a div id called #box with these attributes:
#box {
width:auto;
height:600px!important;
position:absolute;
margin-top:10px;
I've included the jscrollpane CSS directly from the source, and have the selector class styled like this:
.scroll-pane {
overflow-y:auto!important;
position:relative;
display:block;
}
The issue can be seen live at http:ricardojattan.com/portfolio.html
You need to update to the latest version of jScrollPane.