Simple Drag and Drop JS Script not Working? - javascript

Sorry, english not best!
I tried using this simple Javascript and HTML, and CSS, drag drop, and get no correction!
Take look at website, everything is fine, yet not working?
http://bouncygames.org/smell.php

You gotta install jQuery and jQuery UI first mang Uncaught ReferenceError: $ is not defined
http://jqueryui.com/download/

You don't have jQuery and jQuery UI installed.
To do this add the following lines to your head tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

Related

AngularJs 1.x not working with SemanticUI.js

When i try to use AngularJs with SemanticUI.js, the console says
Uncaught ReferenceError : jQuery is not defined
Here is my example of implementation :
<html>
<head>
<!-- I'm head of the document -->
</head>
<body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/semantic.min.js"></script>
<!-- My own script place right here -->
</body>
</html>
Am i doing the right way? I've tried to swap the script position, but my code still doesn't work.
I think the problem in the semantic.min.js, maybe the $ has been replaced by angular or something that i don't know, because when i try to remove the semantic.min.js, no one appears in the console.
I have also try another solution that i've found in stackoverflow, but yes, it still not works.
Only additional information :
AngularJs version 1.5.5
JQuery version 2.2.4
Semantic version 2.1.8
Can anyone give me a solution?
I think it's jQuery problem.
That error can only be caused by one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
Please take a look in here for more detail.
JQuery - $ is not defined
just add a slash
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/angular.min.js"></script>
<script src="/assets/js/semantic.min.js"></script>
Oops, sorry, my bad.
I found the problem, it's not the jQuery problem, it's Electron problem.
Because my project use Electron, so the solution is right here :
Electron : jQuery is not defined

Bootstrap Tooltip Issues (Not Working) [duplicate]

Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/)
This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.
The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".
You should Include in this order:
jQuery
Bootstrap
Your Javascript
EDIT: Try this right before the closing body tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#test').popover();​
});
</script>
Also, the console is your friend. Check and make sure there are no errors.
SOLVED:
Solution: > Right order of Includes > fixing errors i got from my js console.

Jquery conflict in Magento

Hi I am learning Javascript and am stuck resolving a JS related issue on my project http://www.merekhayaal.com/ I have installed Masonry layout which is conflicting with the rest of JS. I have read this usually has to do with fixing jQuery. I am only asking for pointers here. I need the following code to make the Masonry layout work:
<script src="babezlondon/modernizr-latest.js">
</script>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/shopshark/jquery-1.8.3.min.js"><\/script>')</script>
<script src="babezlondon/jquery.masonry.min.js"></script>
<script src="babezlondon/script.js"></script>
But when I put this in, the rest of JS on the page breaks. If the solution is to implement no-conflict in jQuery, what steps can I take to ensure I do it correctly in my case as there are multiple js files to deal with?
Have you already tried using jQuery noConflict? http://api.jquery.com/jquery.noconflict/
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Just use jQuery in noConflict() mode.
Stick this at the bottom of the jQuery script;
var $jq=jQuery.noConflict();
so now you would have to use $jq instead of $jQuery or $
This way, each script you have for different sliders etc you can change the var $jq to suit.
Hope this helps.
http://api.jquery.com/jQuery.noConflict/
Ok so what worked is when i removed a line of code
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
from the script. It was apparently causing the conflict

Bootstrap javascript or popover not working

Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/)
This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.
The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".
You should Include in this order:
jQuery
Bootstrap
Your Javascript
EDIT: Try this right before the closing body tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#test').popover();​
});
</script>
Also, the console is your friend. Check and make sure there are no errors.
SOLVED:
Solution: > Right order of Includes > fixing errors i got from my js console.

Possible jQuery conflict when using bgStretcher

I have setup a test html page to play with bgStretcher before adding it to a custom Wordpress theme. It works fine when I use the jQuery version:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on , but it stops working when I use the version included in Wordpress:
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
The only difference I've seen between the two files is that the WP version prevents jQuery conflicts at the end, calling noConflict().
The page (html below) loads the first image, but then the console outputs an error:
Uncaught TypeError: Cannot read property 'fn' of undefined
(anonymous function)
The live version is on: http://pebbl.es/test/test .Any ideas on how to fix this? I can see it is a conflict error, but I can't see where/how to fix it? Many thanks.
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
Namespace your jQuery: http://api.jquery.com/jQuery.noConflict/
add this between the two script tags:
var $my_jq = jQuery.noConflict();
after this, you have your 1.6.1 jQuery in no conflict mode.
you will have to call it using your variable name after this, e.g. $my_jq('#content')
UPDATE
this might not work, I see you are not loading 2 different jQuerys, your problem occurs when trying to use bgstretcher with an jQuery that is already in noConflict mode.
I am not a wordpress expert, but you might just change the wordpress jQuery to use your variable name. You can set jQuery in noConflict mode with or without namespacing it to a variable and it looks like your wordpress JQ does it without.
Or you can first load your own jQuery, namespace it and then use this for bgstretch.
The problem is that the noConflict call "frees" the $ variable again for use with different frameworks that also want to make use of it, so your bgstretch gets an error when trying to call $.
Or just try to remove the noConflict completly and see if it has any effect on your wordpress installation (it should not, I guess it is just for the purpose of giving WP users the ability to use different JS frameworks as well).
Hope you work it out.

Categories