I am trying to implement okzoom in my rails application but I don't seem to be having much luck. Everything appears to be ok. I've added the javascript file to my javascripts directory (app/assets/javascripts/okzoom.js) and also tried using the okzoom_rails gem just to err on the side of caution. The code editor appears to resolve the okzoom function with no problem but when I run the site, I see the following console error:
Uncaught TypeError: undefined is not a function
And if I use the Chrome debug tools to dig into it, the problem is clearly with my call to okzoom - for some reason the website isn't seeing it.
Here is my application.js file:
//= require jquery
//= require jquery_ujs
//= require fancybox
//= require okzoom
//= require turbolinks
//= require_tree .
$("a.fancybox")
.fancybox( {
'transitionIn': 'elastic',
'transitionOut': 'elastic',
helpers : {
title : {
type: 'inside'
}
},
beforeShow: function() {
/*disable right click*/
$.fancybox.wrap.bind("contextmenu", function (e){
return false;
});
}
});
$("img.zoomable")
.okzoom({
width: 200,
height: 200,
round: true,
background: "#ffffff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000000",
border: "1px solid black"
});
I have no issues with the fancybox implementation and I followed the same pattern for okzoom but with no luck. Anyone have any ideas?
UPDATE
Here is the code for zoomable image:
<%= image_tag(p.file_info.fullPath, class: "zoomable") %>
It's very possible that by the time the JavaScript interpreter gets to the line that loads okzoom that okzoom hasn't already been fetched from the server. I would suggest wrapping your code like the following:
$(document).ready(function() {
$("a.fancybox")
.fancybox( {
'transitionIn': 'elastic',
'transitionOut': 'elastic',
helpers : {
title : {
type: 'inside'
}
},
beforeShow: function() {
/*disable right click*/
$.fancybox.wrap.bind("contextmenu", function (e){
return false;
});
}
});
$("img.zoomable")
.okzoom({
width: 200,
height: 200,
round: true,
background: "#ffffff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000000",
border: "1px solid black"
});
});
The ready event is triggered once all of the website's markup and assets have been downloaded from the server.
Related
How to prevent tinymce loading things from the cloud, but instead loading them from the local path?
tinymce.init({
selector:'textarea',theme: "modern",
height: 400,
document_base_url : "http://my_domain.com/",
relative_urls : true,
external_plugins: {
'responsivefilemanager': '/assets/js/plugins/responsivefilemanager/plugin.min.js',
'filemanager': '/assets/js/plugins/filemanager/plugin.min.js',
},
etc...
but then in the console i see this:
https://cloud.tinymce.com/stable/plugins/filemanager/dialog.php?editor=content
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
I am not able to add resize event to tinymce editor. it is giving me:-
Uncaught TypeError: tinymce.dom.Event.add is not a function
What is the right way to do so?
tinymce.init({
selector: ".tinymceTextarea",
width: '100%',
height: '100%',
plugins: plugins,
statusbar: false,
menubar: false,
toolbar: toolbar,
fontsize_formats : "8px 10px 12px 14px 16px 18px 20px 24px 32px 36px",
// init_instance_callback: "initTinyMCE",
setup: function(e) {
e.on('init', function() {
tinymce.dom.Event.add(e.getWin(), "resize", function(e1) {
console.log("=====")
})
});
});
Thanks in advance
Try the below snippet without chaining
$("#your_textarea_id").tinymce().getWin().bind('resize',function() {
console.log('resize triggered !');
// Your Code goes here.
});
This can easiliy be achieved using the setup tinymce configuration parameter setup to add a window resize handler:
setup: function(ed){
ed.on('init', function() {
$(ed.getWin()).bind('resize', function(e){
console.log('Editor window resized!');
})
});
}
See my tinymce fiddle here: http://fiddle.tinymce.com/snfaab
I'm loading data into a jqGrid through requireJS, the data loads, formats and displays but after which nothing works, sorting, row selecting, paging etc. The grid works perfectly fine if I init the jqGrid without requireJS.
RequireJS config snippet :
"jqGrid": "jqGrid/jquery.jqGrid.min",
"grid-locale": "jqGrid/i18n/grid.locale-en", ...
shim: {
"jqGrid": ["grid-locale", "jquery-ui"]
}
JavaScript snippet:
define(["jquery", "httpUtils", "jqGrid"],
function ($, httpUtils, jqGrid) {
window.jqGrid = jqGrid;
var myViewModel = function () {
var data = httpUtils.httpSyncGet('xxx');
var grid = $('#index').jqGrid({
colNames: ['ClientIdentifier'],
colModel: [
{ name: 'ClientIdentifier', width: "150pt" }
],
datastr: data,
datatype: 'jsonstring',
rowNum: 25,
rownumbers: true,
height: 500,
viewrecords: true,
width: 1100,
shrinkToFit: false
});
};
return myViewModel;
});
Sorry if the code isn't very comprehensive I had to take out snippets from a large project. I'm just curious as to what causes the jqGrid to finish loading, but somehow 'unload' all of it's functions. There is no javascript error in the console as well.
I think you're missing some modules and dependencies. Here's what worked for me (and is also trimmed out from a larger project):
require.config({
baseUrl: "Scripts/TypeScript",
paths: {
jquerygrid: "../jquery.jqGrid.src",
jqueryui: "../jquery-ui-1.11.4",
jqgridlocale: "../i18n/grid.locale-en",
jqgrid: "../jquery.jqGrid.min"
},
shim: {
jqueryui: {
deps: ["jquery"]
},
uigrid: {
deps: ["jqueryui"]
},
jqgrid: {
deps: ['jqueryui', 'jqgridlocale']
},
jqgridlocale: {
deps: ['jqueryui']
}
}
});
I adapted the code above from this answer: requirejs jquery multiple dependent non module jquery plugins like jquery-ui and jqGrid , which addresses a more complicated scenario but my also be useful for you.
I am trying to use r.js to optimize my code but I keep running to this error:
Tracing dependencies for: init
Error: Load timeout for modules: backbone,jquerymobile
The command I am running is this:
$ java -classpath /Users/dixond/build-tools/rhino1_7R4/js.jar:/Users/dixond/build-tools/closurecompiler/compiler.jar org.mozilla.javascript.tools.shell.Main /Users/dixond/build-tools/r.js/dist/r.js -o /Users/dixond/Sites/omm_mobile/js/build.js
My build.js file looks like this:
( {
//appDir: "some/path/",
baseUrl : ".",
mainConfigFile : 'init.js',
paths : {
jquery : 'libs/jquery-1.8.3.min',
backbone : 'libs/backbone.0.9.9',
underscore : 'libs/underscore-1.4.3',
json2 : 'libs/json2',
jquerymobile : 'libs/jquery.mobile-1.2.0.min'
},
packages : [],
shim : {
jquery : {
exports : 'jQuery'
},
jquerymobile : {
deps : ['jquery'],
exports : 'jQuery.mobile'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquerymobile', 'jquery', 'underscore'],
exports : 'Backbone'
}
},
keepBuildDir : true,
locale : "en-us",
optimize : "closure",
skipDirOptimize : false,
generateSourceMaps : false,
normalizeDirDefines : "skip",
uglify : {
toplevel : true,
ascii_only : true,
beautify : true,
max_line_length : 1000,
defines : {
DEBUG : ['name', 'false']
},
no_mangle : true
},
uglify2 : {},
closure : {
CompilerOptions : {},
CompilationLevel : 'SIMPLE_OPTIMIZATIONS',
loggingLevel : 'WARNING'
},
cssImportIgnore : null,
inlineText : true,
useStrict : false,
pragmas : {
fooExclude : true
},
pragmasOnSave : {
//Just an example
excludeCoffeeScript : true
},
has : {
'function-bind' : true,
'string-trim' : false
},
hasOnSave : {
'function-bind' : true,
'string-trim' : false
},
//namespace: 'foo',
skipPragmas : false,
skipModuleInsertion : false,
optimizeAllPluginResources : false,
findNestedDependencies : false,
removeCombined : false,
name : "init",
out : "main-built.js",
wrap : {
start : "(function() {",
end : "}());"
},
preserveLicenseComments : true,
logLevel : 0,
cjsTranslate : true,
useSourceUrl : true
})
And my init.js looks like this:
requirejs.config({
//libraries
paths: {
jquery: 'libs/jquery-1.8.3.min',
backbone: 'libs/backbone.0.9.9',
underscore: 'libs/underscore-1.4.3',
json2 : 'libs/json2',
jquerymobile: 'libs/jquery.mobile-1.2.0.min'
},
//shimming enables loading non-AMD modules
//define dependencies and an export object
shim: {
jquerymobile: {
deps: ['jquery'],
exports: 'jQuery.mobile'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['jquerymobile', 'jquery', 'underscore', 'json2'],
exports: 'Backbone'
}
}
});
requirejs(["backbone",], function(Backbone) {
//Execute code here
});
What am I doing wrong in this build process?
Require.js has a Config option called waitSeconds. This may help.
RequireJS waitSeconds
Here's an example where waitSeconds is used:
requirejs.config({
baseUrl: "scripts",
enforceDefine: true,
urlArgs: "bust=" + (new Date()).getTime(),
waitSeconds: 200,
paths: {
"jquery": "libs/jquery-1.8.3",
"underscore": "libs/underscore",
"backbone": "libs/backbone"
},
shim: {
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
}
});
define(["jquery", "underscore", "backbone"],
function ($, _, Backbone) {
console.log("Test output");
console.log("$: " + typeof $);
console.log("_: " + typeof _);
console.log("Backbone: " + typeof Backbone);
}
);
The Error
I recently had a very similar issue with an angularJS project using requireJS.
I'm using Chrome canary build (Version 34.0.1801.0 canary) but also had a stable version installed (Version 32.0.1700.77) showing the exact same issue when loading the app with Developer console open:
Uncaught Error: Load timeout for modules
The developer console is key here since I didn't get the error when the console wasn't open. I tried resetting all chrome settings, uninstalling any plugin, ... nothing helped so far.
The Solution
The big pointer was a Google group discussion (see resources below) about the waitSeconds config option. Setting that to 0 solved my issue. I wouldn't check this in since this just sets the timeout to infinite. But as a fix during development this is just fine. Example config:
<script src="scripts/require.js"></script>
<script>
require.config({
baseUrl: "/another/path",
paths: {
"some": "some/v1.0"
},
waitSeconds: 0
});
require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule, myModule) {
//This function will be called when all the dependencies
//listed above are loaded. Note that this function could
//be called before the page is loaded.
//This callback is optional.
}
);
</script>
Most common other causes for this error are:
errors in modules
wrong paths in configuration (check paths and baseUrl option)
double entry in config
More Resources
Troubleshooting page from requireJS: http://requirejs.org/docs/errors.html#timeout point 2, 3 and 4 can be of interest.
Similar SO question: Ripple - Uncaught Error: Load timeout for modules: app http://requirejs.org/docs/errors.html#timeout
A related Google groups discussion: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg
In case others have this issue and still struggling with it (like I was), this problem can also arise from circular dependencies, e.g. A depends on B, and B depends on A.
The RequireJS docs don't mention that circular dependencies can cause the "Load timeout" error, but I've now observed it for two different circular dependencies.
Default value for waitSeconds = 7 (7 seconds)
If set to 0, timeout is completely disabled.
src: http://requirejs.org/docs/api.html
The reason for the issue is that Require.js runs into the timeout since the project might have dependencies to large libraries. The default timeout is 7 seconds. Increasing the value for this config option (called waitSeconds) solves it of course but it is not the right approach.
Correct approach would be to improve the page loading time. One of the best technics to speed up a page loading is minification - the process of compressing the code. There are some good tools for minification like r.js or webpack.
I only get this error when running tests on Mobile Safari 6.0.0 (iOS 6.1.4). waitSeconds: 0 has given me a successful build for now. I'll update if my build fails on this again
TLDR:
Requiring the same file twice with two valid different names, possibly two of the following:
absolute path: '/path/to/file.js'
relative path: './path/to/file.js'
as a module: 'path/to/file'
as a module on main paths config:
paths: {
'my/module/file' : '/path/to/file'
}
Recently had this same issue. I did change some require paths in bulk so I knew the issue was about that.
I could clearly see on both server side logs and network debugging tab the file being served in less than a second. It was not a real timeout issue.
I tried to use xrayrequire as suggested to find any circular dependency without success. I looked for requires of the conflicting file and found out I was requiring it twice with different names.