Let me first say I am very unfamiliar with javascript, but I am trying use twitter's twipsy (http://twitter.github.com/bootstrap/javascript.html), their take on jQuery's tipsy.
Here are all the scripts that are getting loaded:
<script src="/javascripts/effects.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/controls.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/rails.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/bootstrap-twipsy.js?1326303918" type="text/javascript"></script>
<script src="/javascripts/application.js?1314051118" type="text/javascript"></script>
As you can see, bootstrap-twipsy.js is getting loaded.
Then on an index.html.erb page I am trying the following code:
<a href="#" id="example" rel='twipsy' title='Some title text'>text</a>
<script>
$(function() {
$('#example').twipsy();
$("a[rel=twipsy]").twipsy({
live: true
});
})
</script>
I get nothing. The reason I have the ('#example').twipsy in there is that I was just trying to call it two different ways, but neither worked. Does anyone see what I'm doing wrong?
In a similar question (http://stackoverflow.com/questions/4916501/where-to-put-my-js-for-tipsy-jquery-tooltip) someone found that their prototype.js was causing conflicts, but I've removed that and I still got nothing.
Installing jquery-rails did the trick
Related
I am a noob to using scrollmagic and trying to learn by replicating one of the examples of ScrollMagic. http://scrollmagic.io/examples/advanced/advanced_tweening.html
In order to load scrollmagic and greensocks javascript library, I added these scripts below. However, in the console, it says .setTween is not a function.. How can I load these scripts successfully? Arent they in a right order?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/jquery.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
Thank you for help :)
Is it just that you missed this one?
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js
I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.
I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.
I am getting error message in firebug saying "TypeError: $ is not a function" and the code of small javascript underneath.
The full code is here:
<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#file').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
</script>
Can anyone help me with this? I am not into javascript programming. Thanks in advance!
Edit: This is what sits in my head section:
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="scripts/sfm_validatorv7.js"></script>
<script type="text/javascript" src="scripts/sfm_validate_jobform.js"></script>
<script type="text/javascript" src="scripts/rollover_images.js"></script>
<script type="text/javascript" src="slideshow/fadeslideshow.js"></script>
<script type="text/javascript" src="scripts/setslides.js"></script>
Do I need to add one more line with just "jquery.js" and upload this file to a server or I am missing something here, looks like all is ok above, thats why I am asking for help.
You've tagged this jQuery. jQuery is a library that provides a function called $, but you have to include the script that provides the library before you can use it.
<script src="path/to/jquery.js"></script>
For other options, see the jQuery download page, with special attention to the section on using a CDN.
1: include the script that provides the jQuery library and try;
2: find out that is there any other scripts contain this tag "$", you can use jQuery to instand of.
I call the js files for bootstrap twitter library but I get the error that indicates
$("a[rel=popover]").popover is not a function
.
<script src="../../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-popover.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// second supervisor popover
$('a[rel=popover]').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
});
</script>
This happened to me in ASP.NET MVC 4. In my project I had a
#Scripts.Render("~/bundles/jquery")
both at the top of my page in the <head> and then again one of these little #Scripts.Render("~/bundles/jquery") suckers snuck in towards the end of the page just before the </body>. I removed the redundant line at the end of the page and the problem went away.
Note that the browser rendered the <head> in the correct order:
<script src="/Scripts/jquery-1.9.1.js">
<script src="/twitterBootstrap/js/bootstrap.js">
<script src="/Scripts/modernizr-2.5.3.js">
However, I ended up with another
<script src="/Scripts/jquery-1.9.1.js">
at the bottom of the page. This confused the browser and it confused the heck outta me too.
This works:
http://jsfiddle.net/9W53Q/7/
Edit: http://jsfiddle.net/9W53Q/272/
Make sure the resoures are being added in the right order (tooltip first).
Or like Richard Dalton suggested (and I recommend), just use the compiled bootstrap.js file.
$(document).ready(function() {
$('a[rel=popover]').popover();
});