We Keep Coding

Cannot read property 'length' of undefined [Galleria-1.4.2.js]

I'm getting the following error in my console:
Uncaught TypeError: Cannot read property 'length' of undefined galleria-1.4.2.min.js:2
trying to use Galleria.io, version 1.4.2 with the basic "classic theme". I do have jQuery (v1.10.2) included and the following code which should be the basic code for getting the galleria image gallery to work:
<script src="galleria/galleria-1.4.2.min.js"></script>
<script>
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
</script>
and guess what, it seems to work perfectly. BUT, I'm having this error in my console and I'm not allowed to have errors in my console. Neither do I like error messages in my console...
I have no clue what is causing this and what I can do about it, all I know it's triggered by the following line:
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
Even if I would leave the options blank. I'm also using bootstrap v3 if that might have anything to do with it.
The selector is a class and not an ID, but I've seen it in example code so it souldn't be a problem. I have multiple small image galleries on one page, so 0, 1 or more so working with ID's is not a good option. My application does require this.
Thanks in advance for helping.

Hello fellow Galleria User. Your problem is
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
You have to ensure its loaded before
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
is called.
To do so, I loaded the Theme in the Header after the Galleria.js.
I invoke the Galleria.run Command in a script-tag after the Galleria Container containing the Pictures.

Telerik modal mvc Unable to get property 'scripts'

Using Telerik controls version 2012.1.214.340 with mvc 3. I want to open a modal window to an external page and thought it would be straight forward....but either it is not...or more likely I am not googling / reading the correct documentation.
I don't really want to load the content into a hidden div and then pop it modal later if the user chooses to do so.
I would prefer to just do it all in javascript / jquery and so my research led me to write this:
What I wrote thus far in javascript is:
var windowElement = $.telerik.window.create({
title: "Test Modal",
html: "<strong>Where am I</strong>",
contentUrl: 'http://www.google.com',
modal: true,
resizable: false,
draggable: true,
scrollable: false,
onClose: function () { }
});
cshtml razor is:
#(Html.Telerik().ScriptRegistrar()
.jQuery(false)
.jQueryValidation(false)
.DefaultGroup(grp => grp
.Add("telerik.window.min.js")
))
)
When I run the site I get this error on load of the page:
0x800a138f - JavaScript runtime error: Unable to get property 'scripts' of undefined or null reference
and the debugger is on this line in the telerik.window.min.js
b.scripts.push("telerik.window.js")
Based upon the line it broke on I went looking for telerik.window.js and didn't find it in the project...huh? The previous owner didn't include that one file?
So I went to google code and found this.
Created the file and added it as such and still I get the error...
So I think I am missing something else but not sure exactly what.
TIA

You shouldn't have to manually include a telerik JS file, they should be loaded automatically (as long as they are in a correct folder).Do you have a folder /Scripts/2012.1.214 with a lot of telerik.js file + jquery ?
Can you try again without adding that file to the DefaultGroup ?
But you'll have another problem, as I see you declare jQuery(false). Was it done on purpose ? Because if you set it to false, and don't declare another jQuery file in the DefaultGroup, nothing will work.

I had the same problem, doing this worked for me:
#(Html.Telerik().Window()
.Name("_placeholder")
.Visible(false)
)
Including somewhere on the page a static window that will never be used - telerik seems to only include scripts when an control of that type is used.

onScreen plugin not working

I'd like to use the onScreen() plugin to control items when they enter or leave viewport (visible part of the screen). As a test a tried to add this line $(".block").fadeIn(6000); to "doIn" but it doesn't work. Is there a syntax issue or something? See http://jsfiddle.net/8E4FA/ Thanks
<script>
$(document).ready(function(){
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
$(".block").fadeIn(6000);
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
});
</script>

I'm the plugin developer. You were using the sample code from the plugin's site, meaning you had no matched elements using the $("elements") selector. I changed the selector to $(".block") and got rid of all the default values.
Here's the updated fiddle: http://jsfiddle.net/8E4FA/1/
Cheers!

I ran it with try and catch and it turns out:
ReferenceError: $ is not defined
My best guess is that you put the reference to the onScreen plugin before the JQuery reference, try reversing them.
However, I have a better guess that you did not include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> in your HTML.

jQuery prompt not closing after clicking close button

I've gotten this to work on all my other pages, and I have copied the code from there, (other developers developed this) and it has worked no problem. I switched to a newer jQuery (1.10) and now the close is not closing the prompt.
function DialogPrompt(url, height, width, onload_method, complete_method) {
$("<div id=\"prompt\"><img src='/js/loadingAnimation.gif' /></div>")
.dialog({
modal: true, height: height, width: width,
buttons: {
"Close": function () {
// Close the dialog
$(this).dialog("close").remove();
}
}
});
}
Before the close button was pressed:
After the close button was pressed:
as you can see that the details of the prompt were closed but the prompt still remains
So before I get flagged for not asking a question:
How do I fix this? Is there something wrong with my syntax? is there something wrong with the close for the new jQuery?
Also, these are my updated jQuery files:
<link rel="Stylesheet" href="/css/ui/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
all updated from the .min files from their website
new error that I got in the console after changing the URL of the prompt being passed in..
"Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
this is baffling.. its the only page that this doesnt work on...

Jquery Fancybox not working after postback

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee

The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info

Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?

It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee

This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );

I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>