I use smoothstate.js, dispte that my jquery cdn is before my main.js it still give me an error $ is not defined
My scripts loading order:
<!-- jquery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!--Smoothstate.js -->
<script src="../assets/scritps/jquery.smoothState.min.js"></script>
<!-- Script tags -->
<script src="../assets/scritps/main.js"></script>
Here is my code:
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
Related
i already add the plugin with cli
github.com.
and this my code
<button onclick="slide('right', 'dashboard.html')">back</button>
<script type="text/javascript">
function slide(direction,href) {
window.plugins.nativepagetransitions.slide(
{
'duration': 400,
'direction': direction,
'iosdelay': 50,
'androiddelay': 120,
'winphonedelay':800,
'href': href
},
function () {
console.log('slide transition finished');
});
}
</script>
and also i already add
<script type="text/javascript" src="cordova.js"></script>
this my complete code
pastebin.com
but is not working, i have error on console
exec proxy not found for NativePageTransitions
In JS you only have a 1:
function slide(href)
but in your html you have 2:
slide('right', 'dashboard.html')
I am trying to load an external library (Javascript) to an Angular2 component (TypeScript).
Take example: https://github.com/fengyuanchen/cropperjs
My approach:
index.html
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
</head>
myCropper.js
window.addEventListener('DOMContentLoaded', function () {
var image = document.querySelector('#image');
var cropper = new Cropper(image, {
viewMode: 3,
dragMode: 'move',
autoCropArea: 1,
restore: false,
modal: false,
guides: false,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
});
});
photo.component.ts
#Component({
selector: 'photo-crop',
template: `
<div class="row">
<img id="image" src="http://img01.ibnlive.in/ibnlive/uploads/875x584/jpg/2015/09/new-google-logo-010915.png" class="img-responsive"/>
<div class="row">
`,
styles: []
})
export class PhotoComponent {
public ngOnInit() {
this.loadScript('src/assets/js/myCropper.js');
});
}
public loadScript(url) {
console.log('preparing to load...')
let node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
Problem: the image is loaded without zoom/crop effect. I inspected the page and saw the script was added correctly in . I refreshed page, no luck. I had no error at all. It seems Angular2 does not activate the script.
I also tried a workaround: putting script in index.html directly (This workaround return error when the page is not loaded yet)
<head>
...
<script src="src/assets/js/myCropper.js"></script>
</head>
Photo is loaded without zoom/crop effect at start. But after I refresh the page, zoom/crop effect is activated. This is not a good practice where all scripts kept in index.html, but at least the script works after refresh.
Any suggestion is appreciated.
I want to implement bootstrap themes to my rails application
http://startbootstrap.com/template-overviews/creative/
in that theme there is a file named creative.js
I have add it to my application via asset pipeline
and when I load the page and use inspect element I can see it under sources tab and I can open it
But the script not worked
but If I copy paste the code and put it in my html It worked properly
my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require creative
//= require_tree .
creative.js
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})
// Initialize and Configure Scroll Reveal Animation
window.sr = ScrollReveal();
sr.reveal('.sr-icons', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 200);
sr.reveal('.sr-button', {
duration: 1000,
delay: 200
});
sr.reveal('.sr-contact', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 300);
// Initialize and Configure Magnific Popup Lightbox Plugin
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.'
}
});
})(jQuery); // End of use strict
my application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Creative - Start Bootstrap Theme</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<%= yield %>
<script>
creative.js code here
</script>
</body>
</html>
change the firstline in creative.js seems to fix this problem
from
(function($) {
into
$(function() {
and the last line from })(jQuery); into });
External JS/jQuery files are loading but not executing
creative.js
$(function() {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})
// Initialize and Configure Scroll Reveal Animation
window.sr = ScrollReveal();
sr.reveal('.sr-icons', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 200);
sr.reveal('.sr-button', {
duration: 1000,
delay: 200
});
sr.reveal('.sr-contact', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 300);
// Initialize and Configure Magnific Popup Lightbox Plugin
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.'
}
});
}); // End of use strict
Here is the situation: I'm using async. script loading with systemJS (by scripts, I mean jQuery, Angular2, ...). Now I would like to implement Turbolinks into this. Everything works just fine, but my angular component is rendered only the first time. If I use Turbolinks to see next page, my component is not rendering. No errors in object inspector and in source code is only this:
<search-app></search-app>
I've tired test in object inspector but after second page lead this is only HTML tag.
Here are my loading scripts in SystemJS in Head tag on my page:
System.config({
meta: {
'/bundles/frontall': { format: 'global' },
'/bundles/raphael': { format: 'global' },
'/bundles/zopim': { format: 'global' },
'/bundles/angular2': { format: 'global' }
},
packages: {
'angular': {
format: 'register',
defaultExtension: 'js'
},
'angular2': {
format: 'global',
defaultExtension: 'js'
},
'rxjs': {
format: 'global',
defaultExtension: 'js'
}
},
paths: {
'angular2/*': 'scripts/angular2/*',
'rxjs/*': 'scripts/rxjs/*'
}
});
System.import('/bundles/frontall').then(function () {
Promise.all([
System.import('/bundles/zopim'),
System.import('/bundles/raphael'),
System.import('bundles/angular2'),
#RenderSection("asyncScripts", required: false)
]).then(function () {
System.import('angular/searchApp');
});
In the frontAll bundle is file site.js, where I re-initing all components:
function componentInit() {
//init material design
$.material.init();
//init texarea autosize
autosize($('textarea'));
//init parallax
$('.parallax-window').parallax();
//init smooth scroll
//SmoothScroll();
//init css3 animate it
$.animateIt();
$.doTimeout();
$.animateItInit();
$.srSmoothscroll({
step: 80,
speed: 90,
ease: 'linear',
target: $('body'),
container: $(window)
});
}
$(function () {
componentInit();
});
$(document).on('page:load', function () {
componentInit();
});
Angular 2 version is beta 7. Does anybody know where is the problem? Thanks a lot!
I need to add this to my angular2 app and it works:
jQuery(function () {
bootstrap(searchApp, [ElementRef, TournamentSearchService]);
});
jQuery(document).on('page:load', function () {
bootstrap(searchApp, [ElementRef, TournamentSearchService]);
});
can't get the following test to work with Firefox 22.0 when AdBlock Plus is enabled. Works just fine on Chrome + when I've disabled adblock. It also works when I'm loading the scripts with script tags instead of requirejs.
./index.html:
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!--<link rel="icon" type="image/png" href="img/icon.png"/>-->
<!--<script src="js/lib/jquery.js"></script>-->
<script data-main="js/main" src ="require.js"></script>
<!--
<script src="js/lib/soundmanager2.js"></script>
<script src="js/test.js"></script>
-->
<title></title>
</head>
<body>
<div id="stop" style="cursor:pointer;"> stop</div>
</body>
</html>
./js/main.js:
require.config({
paths:{
jquery:"lib/jquery",
underscore:"lib/underscore",
soundmanager2:"lib/soundmanager2"
/*backbone:"lib/backbone",
detectmobilebrowser:"lib/detectmobilebrowser"*/
},
shim: {
'underscore': {
exports: '_'
},
'soundmanager2':{
exports:"soundManager"
}
}
});
define(['jquery','underscore',"soundmanager2"],
function($,_,soundManager){
alert("hep");
window.soundManager=soundManager;
soundManager.setup({
url: 'swf',
useHTML5Audio:true,
preferFlash: false, // prefer 100% HTML5 mode, where both supported
onready: function() {
alert('SM2 ready!');
/*
soundManager.createSound({
id: 'mySound',
url: './test/test.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
soundManager.play('mySound');
},
volume: 50
});
*/
},
ontimeout: function() {
alert('SM2 init failed!');
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
$("#stop").on("click",function(){
alert("stop");
soundManager.stop("mySound");
});
return soundManager;
});
No errors or anything in the console, no alerts after that initial 'hep!' one.
Classic pattern, fight with some issue for hours, give up and ask for help, find solution immediately after posting.
added
soundManager.beginDelayedInit();
after soundManager.setup() and it works now.
Use require () method of RequireJS to load a module. In the callback write your code what need. Note that parameter of function is a array contains paths that loads dependencies
require.config({
paths:{
jquery:"lib/jquery",
underscore:"lib/underscore",
soundmanager2:"lib/soundmanager2"
/*backbone:"lib/backbone",
detectmobilebrowser:"lib/detectmobilebrowser"*/
},
shim: {
'underscore': {
exports: '_'
},
'soundmanager2':{
exports:"soundManager"
}
}
});
require(['jquery','underscore',"soundmanager2"],function($,_,soundManager){
alert("hep");
window.soundManager=soundManager;
soundManager.setup({
url: 'swf',
useHTML5Audio:true,
preferFlash: false, // prefer 100% HTML5 mode, where both supported
onready: function() {
alert('SM2 ready!');
/*
soundManager.createSound({
id: 'mySound',
url: './test/test.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
soundManager.play('mySound');
},
volume: 50
});
*/
},
ontimeout: function() {
alert('SM2 init failed!');
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
$("#stop").on("click",function(){
alert("stop");
soundManager.stop("mySound");
});
});