jquery masterpage custom function - javascript

Jquery custom function on masterpage not working
I have a custom function like as follows :
(function ($) {
$.fn.scrollingCarousel = function (options, i) {
...something something
};
jQuery.fn.scrollingCarousel.defaults = {
autoScroll: false,
autoScrollDirection: 'left',
autoScrollSpeed: 10000,
looped: false,
scrollerAlignment: 'horizontal',
scrollerOffset: 0,
scrollSpeed: 'fast',
beforeCreateFunction: null,
afterCreateFunction: null
};
})(jQuery);
i am using it in a page which has a masterpage.
i am using it in a page as follows.
<script type="text/javascript">
$(document).ready(function () {
$(this).('#carousel-demo1').scrollingCarousel();
});
</script>
i get an error as scrollingCarousel is not recognized.
If i dont use the masterpage the code works fine.

As mentioned , the way you are calling your function is not correct
example usage:
$(document).ready(function(){
var a = $("#carousel-demo1").scrollingCarousel();
});
(function ($) {
$.fn.scrollingCarousel = function (options, i) {
alert('something')
};
jQuery.fn.scrollingCarousel.defaults = {
autoScroll: false,
autoScrollDirection: 'left',
autoScrollSpeed: 10000,
looped: false,
scrollerAlignment: 'horizontal',
scrollerOffset: 0,
scrollSpeed: 'fast',
beforeCreateFunction: null,
afterCreateFunction: null
};
})(jQuery);

Related

skrollr.min.js is not initializing

var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: true,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
When i try to init skrollr it just gives me this error:
TypeError: Argument 1 of Window.getComputedStyle is not an object.
What could it be?
I was having this same issue and putting the init inside $(document).ready resolved it for me.
$(document).ready(function () {
var s = skrollr.init();
});

Trying to use ResponsiveSlides on drupal site but getting a console error

I am trying to implement the ResponsiveSlides (http://responsiveslides.com/) to my local drupal instance but anyway I configure the JS code I get a "TypeError: $ is not a function $(function () {" I tried to put the JS code right in the html.tpl.php or as a separate file but it keeps throwing an error, here is the code:
// JavaScript Document
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
$("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
$(".slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
So any help on why this is throwing this console error will be most appreciative.
the correct use is this:
(function ($) {
// code goes here
})(jQuery)
Read this: http://jquery-howto.blogspot.it/2008/12/what-heck-is-function-jquery.html
M.

Script that calls a jquery function before the library load

I have problems with a Jquery function.
I get the jquery library from google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
First, I put the following the code on a .js
(function($){
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend ({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each (function () {
$(this).bind('click', function(e) {
var submitBtn = $(this);
if($(this).attr("jconfirmed")){
submitBtn.removeAttr("jconfirmed");
}else{
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer]=function() {
$( this ).dialog( "close" );
if (thisHref!=null){
window.location = thisHref;
}else{
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer]=function() {
$( this ).dialog( "close" );
submitBtn.removeAttr("jconfirmed");
};
var content='<p>'+theOptions.question+'</p>';
if(theOptions.checkboxText!=undefined){
content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function() {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
And, in a jsp file call the function.
<script type="text/javascript">
$(document).ready(function() {
$('.confirm').jConfirmAction();
});
</script>
But i have the following error in console:
Uncaught TypeError: Object [object Object] has no method 'jConfirmAction'
I tried to fix this by putting the function code in the same jsp, between <script type="text/javascript"></script>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?
Wrap your entire JS code with document.ready()
$(document).ready(function () {
(function ($) {
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each(function () {
$(this).bind('click', function (e) {
var submitBtn = $(this);
if ($(this).attr("jconfirmed")) {
submitBtn.removeAttr("jconfirmed");
} else {
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer] = function () {
$(this).dialog("close");
if (thisHref !== null) {
window.location = thisHref;
} else {
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer] = function () {
$(this).dialog("close");
submitBtn.removeAttr("jconfirmed");
};
var content = '<p>' + theOptions.question + '</p>';
if (theOptions.checkboxText !== undefined) {
content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function () {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
});
Include all your JS files at the end of the file and try again, and one side note ? use '!==' to compare variables with 'null' and 'undefined'

How can I know when imgAreaSelect is closed?

This is my imgSelectArea code:
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
handles: true,
autoHide: false,
minChars: 0,
autoFill: true,
selectOnly: true,
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onSelectEnd: function (img, selection) {
$("#tagBox").show();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = selection.x2;
var y2 = selection.y2;
var position = $('#<%=imgMain.ClientID%>').position();
}
});
This works fine but I want to know when imgSelectArea is closed i.e when you click on overlay area, I want to get notified. I couldn't find this in documentation.
This is the documentation link:
http://odyniec.net/projects/imgareaselect/usage.html#callback-functions
Has anybody got around this issue?
Ok, I haven't got a working dev environment where I am so I can't test this but...
In jquery.imgareaselect.js (I'm using v0.9.8) around line 421:
function cancelSelection() {
$(document).unbind('mousemove', startSelection)
.unbind('mouseup', cancelSelection);
hide($box.add($outer));
setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
if (!this instanceof $.imgAreaSelect) {
options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection());
}
/*ADD THIS LINE*/
options.onCancelSelection(img);
}
Also, around line 461, add a default, empty function:
...
onInit: function () {},
onSelectStart: function () {},
onSelectChange: function () {},
onCancelSelection: function () {}, /* Add This line */
onSelectEnd: function () {}
}, options));
You should then be able to register an event handler as usual...
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
...
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onCancelSelection: function (img) {
/*Do something*/
},
...
});
That's about the best I can do in notepad/ie. If it's still an issue tomorrow, I'll have a go with a dev env.

Allow calling function to override default options - jQuery UI dialog

I want the callingFunction to be able to override the default options provided in the showDivPopUp function.
function calling(){
showDivPopUp("title of pop up box", "message to show",
{
buttons:{
Yes: function () {
$(this).dialog("destroy");
},
No :function () {
$(this).dialog("destroy");
}
}
});
}
function showDivPopUp(title,msg,options){
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title : titl,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
}
So, the above code should show two buttons viz. Yes and No instead of just OK. I don't want to do if check for each option.
UPDATE:
In options parameter there might be options for which default is not applied. So the calling function may specify size option which is not mentioned in the showDivPopUp function.
You want to use the JQuery extend() method to merge the options you pass into the function with the defaults that are specified within it.
See:
http://www.zachstronaut.com/posts/2009/05/14/javascript-default-options-pattern.html
and
http://api.jquery.com/jQuery.extend/
//calling function source excluded, use exactly the same.
function showDivPopUp(title, msg, options) {
//create basic default options
var defaults = {
modal: true,
buttons: {
Ok: function() {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title: title,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
}
//merge the specified options with the defaults.
//in example case, will have the above except with the new buttons specified
if (typeof options == 'object') {
options = $.extend(defaults, options);
} else {
options = defaults;
}
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog(options);
}
Looks like 'options' is in JSON format. Try omitting the first {buttons: portion in the 3rd argument to showDivPopUp or set buttons: options.buttons in the showDivPopUp function.
To expand on this, create more json pairs, and test for their existence in the showDivPopUp function. Exists? Override. Doesn't exist? Keep defaults.
{buttons:{
Yes: function () {
$(this).dialog("destroy");
},
No :function () {
$(this).dialog("destroy");
}
},
background:"blue",
fontsize:15
}
Access each via:
options.buttons
options.background
options.fontsize
Test for existence using:
if ( typeof( window[ 'option.fontsize' ] ) != "undefined" ) {override code}
Response to the update in the question:
Use jquery.each to iterate over all elements in the passed option.
In your mgDiv.dialog function, modify the buttons key to have a conditional value. E.g.:
function showDivPopUp(title,msg,options){
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog({
modal: true,
buttons: options.buttons || {
Ok: function () {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title : titl,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
}

Categories