i am pretty new to mootools, i found it faster/smoother for animations than jquery so i decided to give it a try.
I don't get why the following code is not working, it is working on jsfiddle with Mootools core and Mootools more 1.3.1
<html>
<head>
<script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
<script src="mootools-core-1.3.1-full-compat.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide('paragraph', {mode:'horizontal'}) ;
$('v_slideout').addEvent('click', function(event){
event.stop();
myVerticalSlide.toggle();
});
});
</script>
</head>
<body>
<div id="paragraph">This is a paragraph.</div>
<a id="v_slideout" href="#">Test</a>
</body>
</html>
Can't seem to figure it out, i only could get it worked on jsfiddle.
Any suggestion is appreciated.
Edit: http://jsfiddle.net/F54s3/ << It doesn't work as it should in FF but still it does something, on Opera it seems fine though.
I might have messed up the code as i am pretty new to it, but i am trying to figure out why it works on jsfiddle and doesn't work on my index.html.
The order of your script includes looks suspicious to me:
<script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
<script src="mootools-core-1.3.1-full-compat.js" type="text/javascript"></script>
Shouldn't the mootools-core file come first?
For example:
http://jsfiddle.net/AxJq9/ (throws Javascript error)
<script src="http://mootools.net/assets/scripts/mootools.more.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js" type="text/javascript"></script>
http://jsfiddle.net/AxJq9/1/ (doesn't throw an error)
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js" type="text/javascript"></script>
<script src="http://mootools.net/assets/scripts/mootools.more.js" type="text/javascript"></script>
Related
I have written a simple example to demonstrate the use of bootstrap notify but its not working.
Below is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="bootstrap-notify.js"></script>
<script src="bootstrap-notify.min.js"></script>
<script>$.notify("Hello World");</script>
</head>
<body>
</body>
Replace your script as below just add ready function it work fine. and also add bootstrap css for look good.
<script>
$(document).ready(function(){
$.notify("Hello World");
});
</script>
My Angular2 app runs in Chrome, Firefox, and Safari, but not Internet Explorer. It finds an error in angular2.min.js: SyntaxError: Expected ';'
Here's my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Component</title>
<script src="../../../../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../../../../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../../../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../../../../node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script src="../../../../node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="../../../../node_modules/angular2/bundles/angular2.min.js"></script>
<script>
System.import("./app/main").catch(console.log.bind(console));
</script>
</head>
<body>
<my-comp></my-comp>
</body>
</html>
This is essentially similar to the HTML in Angular's 5 Min Quickstart, but I still get the error in IE. Any ideas?
Finally there is a workaround for the issue (2nd comment).
What worked for me was to include the script 'https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js':
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
I have a code like this:
parent.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#test").draggable().click(function() {
$("#objeto").attr('data', "child2.html").draggable();
});
});
</script>
</head>
<body>
<h2 id="test">text(draggable/click)</h2>
<object id="objeto" data="child1.html"></object>
</body>
and
child2.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#text").draggable();
});
</script>
</head>
<body id="text">child2 (draggable)
</body>
This works correctly, parent loads with child1 content and if you click on "text" it switches to child2, but what i want to know is:
am I downloading jquery.min.js and jquery-ui.min.js 2 times? or are is the second time pulled from cache? (since i'm asking for the same file again)
is there a way I could use jquery without including it on the child's header? (since it is already on the parent)
I'm using Foundation 5 magellan navigation but smooth scroll doesn't work. In example all is fine: http://foundation.zurb.com/docs/components/magellan.html
My code: http://jsfiddle.net/5LKzf/
<head>
<link rel="stylesheet" href="css/foundation-5.2.2/css/foundation.css" />
<link rel="stylesheet" href="css/foundation-5.2.2/css/normalize.css" />
<script src="css/foundation-5.2.2/js/vendor/modernizr.js"></script>
</head>
<body>
//my link
<li class="item-109 menu-el active"><dd data-magellan-arrival="/"><a href="#/" >Main Page</a></dd></li>
//my anhor
<a class="link-pos" data-magellan-destination="/" name="/"> </a>
<script src="css/foundation-5.2.2/js/vendor/jquery.js"></script>
<script src="css/foundation-5.2.2/js/vendor/fastclick.js"></script>
<script src="css/foundation-5.2.2/js/foundation.min.js"></script>
<script>
$( document ).foundation();
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/main.js"></script>
</body>
Did I forget to include any files?
According to the docs
"Make sure jquery.js, foundation.js, and foundation.magellan.js have been included on your page before continuing. For example, add the following before the closing tag:"
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
According to the code you posted, you are missing the magellan js, which would explain why it doesnt work!
I have worked with Foundation 5, and with some features you need to ensure you include the relevant javascript.
I hope this helps!
I'm trying to prompt for a value that will replace the value for "data-amount"
<html>
<body>
Bank Account (25¢)
<script type="text/javascript" src="https://www.dwolla.com/scripts/button.min.js"> </script>
</body>
</html>
I've added
<script type="text/javascript">
document.getElementByClass("dwolla_button")[0].setAttribute("data-amount", "43");
</script>
and tried the whole thing in this script below with no success any ideas?
<html>
<body>
Bank Account (25¢)
<script type="text/javascript">
document.getElementByClass("dwolla_button")[0].setAttribute("data-amount", "43");
</script>
<script type="text/javascript" src="https://www.dwolla.com/scripts/button.min.js"> </script>
</body>
</html>
Change your method from getElementByClassName to getElementsByClassName
document.getElementsByClassName("dwolla_button")[0].setAttribute("data-amount", "43");