I'm developing a mobile app with Phonegap using Jquery Mobile. First I tried to normally add a transition to a < a > tag using:
Page 2
just like it's explained on JQuery Mobile documentation, but I noticed that my page was doing a fading animation before actually doing the slide, and of course it looked horrible. After that happened I thought it was because there's a default animation so I looked for ways to remove it, and I found this:
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
});
</script>
But it still isn't working. I also tried to change the default transition to slide but it didn't work either. Thanks for your time, any ideas?
The ordering of the mobileinit handler is important. It must go between your jQuery main file and the jQuery Mobile file
<!-- jQuery.js -->
<script type="text/javascript" src="assets/js/plugins/jquery-2.1.1.min.js"></script>
<!-- Place after jQuery.js but before jQueryMobile.js -->
<script type="text/javascript" src="assets/js/app.js"></script>
<!-- jQueryMobile.js -->
<script type="text/javascript" src="assets/js/plugins/jquery.mobile-1.4.4.min.js"></script>
Related
Im a little bit confused now. Because I read all other answers but none is like my case.
I manage to always get working my preloading gif using simple jquery load function.
But now even though all my code is the same Im getting this error...
Like if load was not a funcion....
And my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="assets/js/plugins/owl.carousel.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
</head>
<body id="body" data-spy="scroll" data-target=".one-page-header" class="demo-lightbox-gallery">
<div class="loader"></div>
What can it be?
This might solve your problem:
Don't use jQuery 3 yet -- go back to 1.11.3 or such. Especially when using a plugin like owl carousel.
I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.
When I'm using mmenu jquery plugin, it doubles all js events and script call, except scripts in head section. What would be the possible solution for this? Any help would be greatly appreciated.
Sorry, but I can't show you full code, it's on working site. Mmenu starts that way in body section:
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu();
$("#my-menu").find( ".mm-subopen" ).addClass( "mm-fullsubopen" );
});
</script>
i tried mmenu in my production app and at first it gave me some headaches, but understanding how it works helped me to use it correctly.
Wrap your whole layout in a div without styles (so the website's style remains the same).
Place your menu markup outside your layout (inmediately bellow the body tag).
Add the the plugin at the end of your markup along with the initialization code.
Don't manipulate the inner content of the menu to do actions. Use it's API instead.
After you follow these tips, you should have a structure like this:
<html>
<head> ... </head>
<body>
<nav id="mymenu"> ... </nav>
<div> <!-- whole website in here --> </div>
<script src="js/mmenu.min.js"></script>
<script>
$(document).ready(function() {
var mmenu = $("#mymenu").mmenu();
// do not use code bellow, use the API instead.
// $("#my-menu").find( ".mm-subopen" ).addClass( "mm-fullsubopen" );
var api = mmenu.API(); // exposes methods to open() and close() the menu
});
</script>
</body>
</html>
Hope these setup works for you. It worked for me perfectly in my Meteor app.
I'm setting up a gallery, with the pictures in a wide window in the middle of the page, controlled by a scrollbar. I've also set up a page with a form used to contact the artist to arrange a sale, and I want this page to open in a fancybox window.
The link to the form works, but it will not open in a fancybox window.
The scripts in the head of the page are as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" id="sourcecode">
$(function() {
$('.scroll-pane').jScrollPane();
});
</script>
<script>
$(function() {
$('.iframe').fancybox({
width : '50%',
height : '80%',
titlePosition: 'outside'
}); // end fancybox
}); // end ready
</script>
The link meant for a fancy box window looks like this on the page:
<li>buy</li>
My JS console says that it "Cannot read property 'msie' of undefined" in the JQuery fancybox file, and also that $('.iframe').fancybox({ is not a function, but it all seems to work fine in various tutorials and experiments I've pursued where JScrollPane is out of the picture.
The problem is you are using an old version of fancybox and new version of jquery.
Old version of fancybox depends on jquery.browser which is remove in all versions from jquery 1.9.
either use jquery migrate file or use the latest fancybox
Can't seem to get Fancybox to work - it just links to the 1st pic. I get the error: uncaught typeerror object # an object has no method 'fancybox'.
HTML
<a class="fancybox" data-thumbnail="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_slideshow_player_thumbnail/P1010923.JPG" href="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_492x330/P1010923.JPG"><img alt="" src="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/toclogo.jpg"></a>
<br />
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
helpers: {
thumbs: {
width: 40,
height: 40,
source: function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
});
</script>
Header
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
It does seem to be pulling in the external files according to the Source in Chrome's Developer Tools.
Thx
Hmmm. It looks like jquery is loaded twice. Once with
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and the other (harder to find)
http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js
It looks like you're using drupal and with a bit of googling, it sounds like it injects a version of jquery for you (jQuery JavaScript Library v1.3.2)
The reason that error is occuring is the conflict between the two libraries. Try following this update
http://drupal.org/project/jquery_update
You're pulling in the two versions of jQuery.
When you execute jQuery(".fancybox").jquery from the console, you get 1.3.2. Undoubtedly, this is not compatible with fancybox.
jQuery 1.8.2 is loaded via the Google CDN with your explicit script tag request.
jQuery 1.3.2 is loaded as part of http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js, which comes from Drupal injecting this library for its own purposes.
For future reference, I was able to locate this file by using the Chrome Developer Tools, sorting by file size (largest first) and then looking at the JS files... found it pretty quickly after that.
I was having this same problem and I resolved it by changing the double quotes in the line:
$(".fancybox").fancybox();
To single quotes:
$('.fancybox').fancybox();
Sort of a 'gotcha' since the fancyBox site has double quotes.
if anything does not work:
parent.window.document.getElementById("fancybox-wrap").style.display = 'none';
This hiding fancybox.