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}
Related
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"
});
I'm using <script src="js/jquery.min.js"></script>FOR THE SLIDER and many other functionalities.
I'm also using <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> FOR THE GALLERY.
Everything seems to work perfectly but when I add 1.6.2 jquery.min.js from googleapis it stops everything, including the sliders and the smooth scrolling. The only thing that is working is the gallery.
Here's my code:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
In the body I have this code:
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
This is the one that's causing conflict, I have tried to put it in the head but it did not make any difference:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Thank you for your assistance!
In general you should avoid using 2 different versions of jQuery on the same page. Most of the time you won't need to - they are largely backwards compatible. Try putting the newer of the 2 versions of jQuery first, then removing the other one. As js/jquery.min.js is the newer version, try removing the google ajax apis one completely.
If you are using something that is broken by a new version of jQuery, check that there hasn't been a new version of that thing released. If there hasn't, try to fix it yourself to work with the new jQuery.
The next option is to check if there is an older version of the thing that requires a new jQuery that might work with the older jQuery version.
If none of those options work, you can try to use 2 versions of jQuery on your page using jQuery.noConflict(), but this is not recommended. After you load the first version and before you load the second, do something like:
j = jQuery.noConflict();
Then use j instead of $ whenever you want to use that version of jQuery, and $ for the second version.
enter code here <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script>
$j = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="vendor/jquery/jquery.min_multi_select.js"></script>
Works well, then you can use $j.ajax({
})
I am using jquery 1.10.2 to include a slider on my website, but for some reason it is not showing up. Please help!
Here is my code:
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script src="js/jquery-1.10.2.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
Why is it not showing up? Code seems to be correct.
The JQUERY UI library also requires the standard JQUERY Library.
Ok. Here's my code:
<script type="text/javascript" language="javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#try1").fancybox();
});
Firebug says "$("#try1").fancybox is not a function".
This is really frustrating!!
It's working fine in other pages. :(
Thanks in advance.
You may want to recheck the entire HTML page as there are times when certain js files are linked at the bottom of the page, just above the closing body tag.
Hope this helps.
Have you checked if it is properly including the "fancybox-1.3.4.pack.js" with firebug?
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.