onScreen plugin not working - javascript

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.

Related

Increase width of filter search on FooTable Plugin

I've been looking all over and can't seem to find/figure out how to make the 'data-filter' search box any bigger. I would like to make it wider while still remaining its responsiveness to window resizing, is this possible? I've tried passing
filtering: [{ container: "#footableFilterBox", options: { style: { width: "75%" } } }]
but that either doesn't apply here or my syntax is incorrect?
I've also tried to add css width directly to the input-group that FooTable generates using
$(document).load(function() {
$('div#footableFilterBox').find('.input-group').css('width','75%');
});
But it doesn't seem to work. I've also tried to .addClass(); and customize my own css but that didn't work either.
Anyone have any ideas? This would be greatly helpful for the layout of my page. Thanks in advance!
Update
Here is the code used to initialize the FooTable plugin. It resides at the bottom of my HTML page. I'm using it in a rails application but that shouldn't make much of a difference, imo.
<script type="text/javascript">
jQuery(function($) {
$('#propertiesTable').footable({
filtering: [{
container: "#footableFilterBox"
}]
});
});
</script>
Code that worked
Based off of #gaetanoM's answer I was able to use jQuery Tree Traversal to navigate my way to finding the element that I needed. Code below:
$('#propertiesTable').on('postinit.ft.table', function(e, ft) {
$(this).closest('.clients-list').siblings('#footableFilterBox').find('.footable-filtering-search, .input-group').css('width','100%');
}).footable();
Thanks for all answers provided!
You may use:
postinit.ft.table: The postinit.ft.table event is raised after any components are initialized but before the table is drawn for the first time. Calling preventDefault on this event will disable the initial drawing of the table.
$('.table').on('postinit.ft.table', function(e, ft) {
$(this).find('.footable-filtering-search .input-group').css('width','75%')
}).footable();
The fiddle.

jquery resizable() not working (with example)

Please see this work in progress:
http://rawgit.com/jfix/cover-image-position/master/index.html
My goal is to allow drag and drop from the desktop onto this page, and following that to drag the image around as well as to resize it. You should be able to drop an image onto the page and to drag it around.
However, what doesn't work is the resizing of the image. There is no handle displayed at the frame around the image and it's impossible to resize it. No errors in the console.
The relevant code is here:
hdl.resizable({
aspectRatio: true,
autoHide: true,
alsoResize: "#coverimage",
handles: 'all',
resize: function(event, ui) {
cvr
.css('left', ui.position.left)
.css('top', ui.position.top);
}
});
where hdl is a short form for the $('#handler') in the assets/script.js file. I should note that this has been copied almost verbatim from this jsfiddle: http://jsfiddle.net/nL5ew/ where it works fine, obviously.
I can't seem to find the problem with my code. Thank you for any eagle-eyed insights you may have.
Having inspected #RRR's JSFiddle, and comparing it line by line with my code, I ended up discovering that I was not including one, as it turns out, vital CSS file from the JQuery UI suite. This is the line that was missing:
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
In all fairness the correct solution was provided by #RRR, unfortunately not in a full-blown answer but just in a comment.
use this syntax for better result:
$(selector, context).resizable({option1: value1, option2: value2..... });

Why does my JQuery fading slider not work on any IE type?

My JQuery slider does not work in IE(in any documentmode). How could I fix this? My code slides down a div of text after a button is pressed(it fades in nicely too). The IE console gives me this error: "Object doesn't support property or method 'fadingSlideToggle'".
(function ($) {
$.fn.fadingSlideToggle = function ($el, options) {
var defaults = {
duration: 500,
easing: 'swing',
trigger: 'click'
};
var settings = $.extend({}, defaults, options)
$selector = $(this).selector;
return this.each(function () {
var $this = $(this);
$(document).on(settings.trigger, $selector, function (e) {
e.preventDefault();
if ($($el).css('display') == 'none') {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
} else {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
}
});
});
};
})(jQuery);
I wonder which part is not supported, and how to fix it. Thank you a lot!
EDIT:
Here is the code where I call the function(it works on firefox and chrome):
<button class="btn-custom btn-lg"" id="clickedEl"><span>Why rate/review websites?</span> </button></br>
<nav role="navigation" id="toggleEl">/*non relevant html*/</nav>
The rest of the javascript:
$(function(){
$('#clickedEl').fadingSlideToggle('#toggleEl');
});
The JSFiddle that does not work in IE: http://jsfiddle.net/3ymvv
The problem seems to come from jQuery 1.10.1 (#13936 #13980). Here's the error we got :
Access Denied - jQuery-1.10.1.js, line : 1513, column : 2
And the related lines :
// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) { // :1513
parent.attachEvent( "onbeforeunload", function() {
setDocument();
});
}
This happens early, and possibly prevent your script to be loaded.
Update jQuery to the 1.11.0 version (or more) and you'll see it works.
When I was testing in windows XP, ie8 and an old version of firefox exhibited the same behaviour (it suddenly appearing when #clickeEl first clicked) . Removing the <nav> element and just using the <ul> element seemed to fix it. Then I realized that the problem was the tag <nav> which is unknown to ie8 and firefox. As described in this article, the browsers do not know that <nav> is a block element. So adding
nav { display:block }
fixed the problem on me in ie8 in windows xp.
Demo
Actually, not sure how compatible this is, but it seems the plugin is doing some unnecessary stuff, since it's using jQuery. So I added it a bit below. (Mostly it bothered me you have to set display:none in CSS with an ID instead of the plugin itself.
Proposed Changes
Here we clearly do not know where the problem might be.
Your code looks fine.
Please show us the code where you use your plugin
There where you use your plugin, check if the plugin is defined console.log($.fn.fadingSlideToggle)
check that the object you are calling your plugin on is actually a valid jQuery Object.
console.log(obj instanceof jQuery) or (!!obj.jquery && typeof obj.jquery === "string")
a jquery object usualy has a property called jquery that has the current jQuery version in it. Also the jquery object is usually an instance of the jQuery Object itself. But keep in mind it is possible that using .noconflict() there is no global variable jQuery or $
The problem is the jQuery loading in the fiddle. Just load jQuery from a CDN and then initiate your plugin.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// your plugin
</script>
Now it works fine in IE 8+.
Do you by any chance have a html element with the id of fadingSlideToggle? That could be the issue as explained here: https://stackoverflow.com/a/14003088/561957

jQuery issue - #<an Object> has no method

I've tried a veriety of jQuery plugins recently and I keep getting this error …
(source: shaunbellis.co.uk)
… regardless of what plugin I try to use.
I've checked the links to the JS files which are all there and working fine. I'm using Drupal if that makes any difference.
I've run the plugins away from the main site to demonstrate that they are working and that I am doing things right with 100% success.
Any ideas?
Update:
My jQuery file called in the footer:
$(document).ready(function() {
$('#footer_holder').hide();
// Fancy Box
$("a.fancybox").fancybox({
'hideOnContentClick': true,
'titlePosition' : 'over',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
});
$("#homepage_slider").easySlider({
auto: true,
continuous: true,
});
});
*note - fancy box works fine (unless the easySlider code is above it). jQuery is sorted out by Drupal. I'm running version 1.4
This problem can also arise if you include jQuery more than once.
Ignore me. I'm sorry everyone. I'd mistyped the url of the script. Thanks to Simon Ainley for the prod in the right direction.
Sorry again. Thanks.
I had this problem, or one that looked superficially similar, yesterday. It turned out that I wasn't being careful when mixing jQuery and prototype. I found several solutions at http://docs.jquery.com/Using_jQuery_with_Other_Libraries. I opted for
var $j = jQuery.noConflict();
but there are other reasonable options described there.
For anyone else arriving at this question:
I was performing the most simple jQuery, trying to hide an element:
('#fileselection').hide();
and I was getting the same type of error, "Uncaught TypeError: Object #fileselection has no method 'hide'
Of course, now it is obvious, but I just left off the jQuery indicator '$'. The code should have been:
$('#fileselection').hide();
This fixes the no-brainer problem. I hope this helps someone save a few minutes debugging!
This problem may also come up if you include different versions of jQuery.
This usually has to do with a selector not being used properly. Check and make sure that you are using the jQuery selectors like intended. For example I had this problem when creating a click method:
$("[editButton]").click(function () {
this.css("color", "red");
});
Because I was not using the correct selector method $(this) for jQuery it gave me the same error.
So simply enough, check your selectors!

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>

Categories