I am migrating a menu widget from jQuery 1.6.4 to a newer version of jQuery , 1.11.1
$(document).ready(function () {
$('#takeMeToLink').menu({
content: $('#globalContent1').html(),
flyOut: false
});
});
Markup
<a id="takeMeToLink" href="#" style="color:black">
Take Me To
<span style="height:3px;width:15px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-viewselector-arrow">
<img src="/_layouts/15/images/fgimg.png" alt="Open Menu" style="border-width:0px;position:absolute;left:-0px !important;top:-491px !important;" /></span>
</a>
When I replace the .js file with the new one, it throws an exception
Uncaught TypeError: $(...).menu is not a function
Is there a new function available?
.menu() is a Jquery UI "widget", which means you need to include JQuery ui.
Here's the script and stylesheet on google's CDN that you should include as well as your JQuery script(feel free to download it if that's easier):
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Here's the documentation: https://jqueryui.com/menu/
Here's an example of how to use it: http://jsfiddle.net/FwBNE/1/
Related
I am getting the mentioned error with the following code. The documentation says that you only need jQuery and Bootstrap and then tooltip is there. popper is also not needed if using the bootstrap min version.
Why does it not work? I searched for hours and no none seems to have the same problem. Thanks for help in advance.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>
The following works for me in Bootstrap 5 - the same may be applicable in bootstrap 3/4, but double check the docs for your version.
Require jQuery first.
I've seen some other threads saying you need to require jquery-ui too - personally i've not had to do this, I can't speak for earlier bootstrap versions.
jQuery has been removed from Bootstrap 5, but it knows to use it if you have it in your project. To do this you must assign jQuery to window.jQuery - if you try to only assign it to the $ shorthand Bootstrap won't find jQuery (this was the issue for me - see example below of how I use both)
Next require #popperjs/core before bootstrap
Make sure you're using the correct Popper package for your bootstrap version - 4 requires popper.js, which is not the same as #popperjs/core
Lastly, require bootstrap
If you want tootlips to work on dynamically loaded content (e.g. content that is loaded after you make some future AJAX request), you'll want to make sure you define the selector for tooltips to look for.
window.jQuery = window.$ = require('jquery');
window.Popper = require('#popperjs/core');
require('bootstrap');
$('body').tooltip({
selector: '[data-bs-toggle="tooltip"]',
});
N.B. I'm using packages installed with NPM (i.e. not via CDN), requiring them in my app.js from node_modules. But the same should mostly be applicable - especially the order your require dependencies.
Bootsrtap 5.1.3
jQuery 3.6.0
#popperjs/core 2.11.5
Tooltips require popper.js to work. Make sure you include that before bootstrap.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
You need to add bootstrap.min.css file and you can also set position of tooltip by data-placement attribute & set value to top, bottom, left or right.
Bootstrap3 tooltip doc: https://getbootstrap.com/docs/3.3/javascript/#tooltips
$(document).ready(function() {
//Tooltip initialization
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<input type="text" class="form-control" data-toggle="tooltip" title="hi there!">
</div>
</div>
</div>
For some reason my lightgallery is not working. I added it the same way I always do and all javascript files are included after Jquery.
I get this message in the console:
Uncaught TypeError: $ is not a function
at product-1.html:433
(anonymous) # product-1.html:433
Which points to:
<script type="text/javascript">
$(document).ready(function($) {
$("#lightgallery").lightGallery();
});
</script>
All files are correctly loaded, I checked in the network tab.
What could be the problem and how can I fix it? Maybe there is a conflict somewhere? Can I wrap it in a function to make it work?
My js files:
in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html content
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body include light gallery js files after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
This really works for me.
Clearing browser cache may help sometimes. Or narrow down your problem by loading one by one starting with jquery.
This solves the problem :
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
1.Check your maps api js link like https://developers.google.com/maps/api/js this is correct or not
2.Press Ctrl+Shift+Del button at a same time and clear caches and cookies
I have a problem creating a bounce effect on an image with jQuery effect() function.
Actually is use this code (code after calling the jQuery library):
$(document).ready(function() {
$('#arrow-disclaimer').bind('mouseenter', function(){
$(this).effect('bounce',500);
});
});
//Here there isn't the jQuery library, but in the page is included before jqueryUI
<link rel="stylesheet" type="text/css" href="css/style-disclaimer.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<a href="#disclaimer-p">
<img src="images/arrow483.png" id="arrow-disclaimer" />
</a>
Could someone tell me why i get this error?
Uncaught TypeError: $(...).effect is not a function
You need to load jQuery to use jQuery-ui or any other dependant plugin
You're using jquery-ui-i18n which is used for internationalization only. You need to include jquery-ui main library and if you want to use i18n, include it after jquery-ui.
bind is deprecated in jQuery version 1.7, use on.
$(document).ready(function() {
$('#arrow-disclaimer').on('mouseenter', function() {
$(this).effect('bounce', 500);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<a href="#disclaimer-p">
<img src="images/arrow483.png" id="arrow-disclaimer" />
</a>
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.
when I search for this on google I just get a lot of wordpress plugin responses, so I'm asking here.
I have a wordpress.org blog. There's a link that, onclick, I would like to open up a fancybox w/ some content inside of it, actually a spotify embeded playlist w/ a header.
I've included all of the fancybox files and initialize, and no luck. Here is my code:
Initialization:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#playlist_pop").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
And here is my html:
<div class="spotify_header" style="padding-bottom: 10px;padding-top: 10PX;text-align: center">CHECK US OUT ON <a id="playlist_pop" href="#playlist_data"><span>SPOTIFY</span></a>
<div style="display:none">
<div id="playlist_data">
<div id="Spotiplay">
<h3>Artists We Love</h3><br/>
<div id="playlist_pop_con"><iframe src="https://embed.spotify.com/?uri=spotify:user:yalefox:playlist:3NCBHSkbl0jLZtUnNWkdPh" width="312" height="392" frameborder="0" allowtransparency="true"></iframe></div>
</div>
</div>
</div></div>
Can anyone help me with this? Incredible how something so easy can be made such a pain in wordpress..
I get this error message in the console: Uncaught TypeError: Object [object Object] has no method 'fancybox'
Does this mean it's not reading the fancybox js files?
Thanks so much for the help. Not sure if it has anything to do with my client's blog configuration or just a lack of support for regular Fancybox 1.3.2 and wordpress.org, but I had to resort to the Lytebox wordpress plugin - http://wordpress.org/extend/plugins/lytebox/ -where you just include a rel="lyteframe" in the a tag..I restyled it to look just like a fancybox, so while not optimal or as robust as fancybox, it's not a bad alternative