using two fancybox methods together

using two fancybox methods together - javascript

So I have the code for fancybox:
$(".fancybox").fancybox({
beforeShow: function () {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
and
$(document).ready(function () {
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}
});
});
when I try to use them both I get a syntax error:
$(document).ready(function () {
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}
beforeShow: function () {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
and when I use them separately neither of the fancybox functions work.
<script>
$(document).ready(function () {
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
<script>
$(".fancybox").fancybox({
beforeShow: function () {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
</script>
How can I use them both?

You're missing a comma in your object properties on line 7 between helpers: { ... } and beforeShow: function() { ... }
$(document).ready(function () {
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}, // <-- this comma right here is missing in your code
beforeShow: function () {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});

Related

ReferenceError: jQuery is not defined in main.js file

I am running into this error all of a sudden. I haven't anything with the Javascript or jQuery code so not sure why I'm getting this error all of a sudden.
This is the error I'm getting when trying to run my code:
Debugger listening on [::]:15454
/home/ubuntu/workspace/assets/js/main.js:232
}(jQuery);
^
ReferenceError: jQuery is not defined
Code:
(function($) {
skel.breakpoints({
xxlarge: '(max-width: 1920px)',
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 1000px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)',
});
$(function() {
var $window = $(window),
$body = $('body'),
$header = $('#header'),
$all = $body.add($header);
// Disable animations/transitions until the page has loaded.
$body.addClass('is-loading');
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-loading');
}, 0);
});
// Touch mode.
skel.on('change', function() {
if (skel.vars.mobile || skel.breakpoint('small').active)
$body.addClass('is-touch');
else
$body.removeClass('is-touch');
});
// Fix: Placeholder polyfill.
$('form').placeholder();
// Fix: IE flexbox fix.
if (skel.vars.IEVersion <= 11
&& skel.vars.IEVersion >= 10) {
var $main = $('.main.fullscreen'),
IEResizeTimeout;
$window
.on('resize.ie-flexbox-fix', function() {
clearTimeout(IEResizeTimeout);
IEResizeTimeout = setTimeout(function() {
var wh = $window.height();
$main.each(function() {
var $this = $(this);
$this.css('height', '');
if ($this.height() <= wh)
$this.css('height', (wh - 50) + 'px');
});
});
})
.triggerHandler('resize.ie-flexbox-fix');
}
// Prioritize "important" elements on small.
skel.on('+small -small', function() {
$.prioritize(
'.important\\28 small\\29',
skel.breakpoint('small').active
);
});
// Gallery.
$window.on('load', function() {
var $gallery = $('.gallery');
$gallery.poptrox({
baseZIndex: 10001,
useBodyOverflow: false,
usePopupEasyClose: false,
overlayColor: '#1f2328',
overlayOpacity: 0.65,
usePopupDefaultStyling: false,
usePopupCaption: true,
popupLoaderText: '',
windowMargin: 50,
usePopupNav: true
});
// Hack: Adjust margins when 'small' activates.
skel
.on('-small', function() {
$gallery.each(function() {
$(this)[0]._poptrox.windowMargin = 50;
});
})
.on('+small', function() {
$gallery.each(function() {
$(this)[0]._poptrox.windowMargin = 5;
});
});
});
// Section transitions.
if (skel.canUse('transition')) {
var on = function() {
// Galleries.
$('.gallery')
.scrollex({
top: '30vh',
bottom: '30vh',
delay: 50,
initialize: function() { $(this).addClass('inactive'); },
terminate: function() { $(this).removeClass('inactive'); },
enter: function() { $(this).removeClass('inactive'); },
leave: function() { $(this).addClass('inactive'); }
});
// Generic sections.
$('.main.style1')
.scrollex({
mode: 'middle',
delay: 100,
initialize: function() { $(this).addClass('inactive'); },
terminate: function() { $(this).removeClass('inactive'); },
enter: function() { $(this).removeClass('inactive'); },
leave: function() { $(this).addClass('inactive'); }
});
$('.main.style2')
.scrollex({
mode: 'middle',
delay: 100,
initialize: function() { $(this).addClass('inactive'); },
terminate: function() { $(this).removeClass('inactive'); },
enter: function() { $(this).removeClass('inactive'); },
leave: function() { $(this).addClass('inactive'); }
});
// Contact.
$('#contact')
.scrollex({
top: '50%',
delay: 50,
initialize: function() { $(this).addClass('inactive'); },
terminate: function() { $(this).removeClass('inactive'); },
enter: function() { $(this).removeClass('inactive'); },
leave: function() { $(this).addClass('inactive'); }
});
};
var off = function() {
// Galleries.
$('.gallery')
.unscrollex();
// Generic sections.
$('.main.style1')
.unscrollex();
$('.main.style2')
.unscrollex();
// Contact.
$('#contact')
.unscrollex();
};
skel.on('change', function() {
if (skel.breakpoint('small').active)
(off)();
else
(on)();
});
}
// Events.
var resizeTimeout, resizeScrollTimeout;
$window
.resize(function() {
// Disable animations/transitions.
$body.addClass('is-resizing');
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(function() {
// Update scrolly links.
$('a[href^="#"]').scrolly({
speed: 1500,
offset: $header.outerHeight() - 1
});
// Re-enable animations/transitions.
window.setTimeout(function() {
$body.removeClass('is-resizing');
$window.trigger('scroll');
}, 0);
}, 100);
})
.load(function() {
$window.trigger('resize');
});
});
})(jQuery);
Edit:
here is the code from bottom of index.html
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
here is the code from bottom of index.html
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>

use events after loading script

I have two events which use functions from script. How to start use this functions only after loading script?
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/intl-tel-input/js/intlTelInput.js"></script>
<script>
var settings = {
utilsScript: "../lib/intl-tel-input/js/utils.js",
initialCountry: "auto",
geoIpLookup: function (callback) {
$.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
}
};
$("#phoneNumber").intlTelInput(settings);
$("#viber").intlTelInput(settings);
$("#phoneNumber").on('input', function (e) {
var intlNumber = $("#phoneNumber").intlTelInput("getNumber");
$("#viber").intlTelInput("setNumber", intlNumber);
});
$("#phoneNumber").on("countrychange", function (e, countryData) {
$("#viber").intlTelInput("setCountry", countryData.iso2);
});
</script>
in google chrome console:
Uncaught TypeError: $(...).intlTelInput is not a function

use $(document).ready(function(){})
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/intl-tel-input/js/intlTelInput.js"></script>
<script>
$(document).ready(function(){
var settings = {
utilsScript: "../lib/intl-tel-input/js/utils.js",
initialCountry: "auto",
geoIpLookup: function (callback) {
$.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
}
};
$("#phoneNumber").intlTelInput(settings);
$("#viber").intlTelInput(settings);
$("#phoneNumber").on('input', function (e) {
var intlNumber = $("#phoneNumber").intlTelInput("getNumber");
$("#viber").intlTelInput("setNumber", intlNumber);
});
$("#phoneNumber").on("countrychange", function (e, countryData) {
$("#viber").intlTelInput("setCountry", countryData.iso2);
});
});
</script>

I'm located script in Scripts section and it solve the problem.
#section Scripts {
<script src="~/lib/intl-tel-input/js/intlTelInput.js"></script>
<script>
$(document).ready(function () {
var settings = {
utilsScript: "../lib/intl-tel-input/js/utils.js",
initialCountry: "auto",
geoIpLookup: function (callback) {
$.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
}
};
$("#phoneNumber").intlTelInput(settings);
$("#viber").intlTelInput(settings);
$("#phoneNumber").on('input', function (e) {
var intlNumber = $("#phoneNumber").intlTelInput("getNumber");
$("#viber").intlTelInput("setNumber", intlNumber);
});
$("#phoneNumber").on("countrychange", function (e, countryData) {
$("#viber").intlTelInput("setCountry", countryData.iso2);
});
});
</script>

Try to include "intlTelInput-jquery.min.js" from the library under jquery. It solved my problem.
<script src="//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.min.js"></script>

Javascript functions in custom namespaces

It is possible to declare 2 more functions in main function like this ?
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: function() {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
and i receive the following error: Uncaught SyntaxError: Unexpected token ( on this line "show: function() {"

Remove the function from the right of the countdown (demo)
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
Next time, use jsFiddle to make a demo and click the "JSHint" button.

Actually, none of this will work. Unless you make countdown an object or you treat its sub-functions as proper functions.
Why: Under countdown, you created an instance of object not a function.
var jquery4u = {
countdown: function() {
show = function() {
console.log('show');
}
hide = function() {
console.log('hide');
}
jquery4u.countdown.show();
}
}
The above code is a valid code so it is possible. Unfortunately it will not return anything.
The proper way to do this is in this format:
var jquery4u = {
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
This will work. You can try it out by calling:
jquery4u.countdown.show();

How to call a script on success of $.ajax

The goal
Call a script (to be more specific, qTip2 script) on success of $.ajax function from jQuery.
The problem
I have the following script to work with KnockoutJS:
$.ajax({
url: "/ProductsSummary/List?output=json",
dataType: "json",
success: function (data) {
var mappingOptions = {
create: function (options) {
return (new (function () {
this.finalMeasure = ko.computed(function () {
return this.quantity() > 1 ? this.measure() + "s"
: this.measure();
}, this);
this.infoComposition = ko.computed(function () {
return this.quantity() + ' ' + this.finalMeasure();
}, this);
ko.mapping.fromJS(options.data, {}, this);
})());
}
};
ViewModel.Summary.products = ko.mapping.fromJS(data, mappingOptions);
ko.applyBindings(ViewModel);
$("ul.products-list li").each(function () {
var $productId = $(this).data("productid"),
$match = $(".summary")
.find("li[data-productid=" + $productId + "]")
.length > 0;
if ($match) {
$(this).find("button.action").addClass("remove");
} else {
$(this).find("button.action").addClass("add");
}
});
}
});
In the following fragment, I set a class to a button to define its style, but I have no success because I need to call the qTip2 again to render the new tooltip. See:
$("ul.products-list li").each(function () {
var $productId = $(this).data("productid"),
$match = $(".summary")
.find("li[data-productid=" + $productId + "]")
.length > 0;
if ($match) {
$(this).find("button.action").addClass("remove");
} else {
$(this).find("button.action").addClass("add");
}
});
To make the things work, I have to call the qTip2 script after this fragment, but it was previously called.
To do not be redundant or practice the DRY concept, how can I call, inside of the "on success", qTip2 script again?
A little of code
My qTip2 Script:
$(function () {
var targets = $("ul.products-list li .controls
button.action.add").attr('oldtitle', function () {
var title = $(this).attr('title');
return $(this).removeAttr('title'), title;
}),
shared_config = {
content: {
text: function (event, api) {
return $(event.currentTarget).attr('oldtitle');
}
},
position: {
viewport: $(window),
my: "bottom center",
at: "top center",
target: "event"
},
show: {
target: targets
},
hide: {
target: targets
},
style: "qtip-vincae qtip-vincae-green"
};
$('<div/>').qtip(shared_config);
$('<div/>').qtip($.extend(true, shared_config, {
content: {
text: function (event, api) {
var target = $(event.currentTarget),
content = target.data("tooltipcontent");
if (!content) {
content = target.next("div:hidden");
content && target.data("tooltipcontent", content);
}
return content || false;
}
},
position: {
my: "top center",
at: "bottom center",
viewport: $(".content"),
container: $(".content")
},
show: {
event: "click",
effect: function () {
$(this).show(0, function () {
$(this).find("input[name=productQuantity]").focus();
});
}
},
hide: {
event: "click unfocus",
fixed: false
},
events: {
hide: function (event, api) {
$($(this).find("input[type=text].quantity")).val("");
$($(this).find("button")).prop("disabled", true);
}
},
style: "qtip-vincae qtip-vincae-grey"
}));
});
Thanks in advance.

As I see it you should call simply $(this).find("button.action").qtip() or .qtip(...) and set/update what you want.
This demo could be your cheat-sheet:
http://craigsworks.com/projects/qtip2/demos/#validation

first time implementing module pattern variable is undefined

here is my code
var s;
var AddEvent = {
settings : {
saveButton : $('#uploadfiles1'),
cancelSpeech : $('.cancelSpeech'),
datePicker : $(".datepicker"),
eventName : $('input[name=eventname]'),
eventDate : $('input[name=eventdate]')
},
init:function(s){
s = this.settings;
this.BindEvents();
$('.Wallpapers').addClass('active');
$('input, textarea').placeholder();
},
BindEvents:function(){
this.CancelButton();
this.DatePicker();
// this.SaveButton();
$('input[type=text],textarea').on('keyup change',function(){
AddEvent.FieldsCheck();
});
},
CancelButton: function()
{
s.cancelSpeech.on('click',function(){
var referrer = document.referrer;
window.location = referrer;
});
},
DatePicker :function()
{
s.datePicker.datepicker({
//defaultDate: +7,
showOtherMonths: true,
autoSize: true,
//appendText: '(dd-mm-yyyy)',
dateFormat: 'dd/mm/yy'
});
},
SaveButton: function()
{
this.ClearFields();
},
FieldsCheck: function()
{
alert(s.eventName.attr('name'));
if(s.eventName.val()!='' && s.eventDate.val() !='' && $('textarea').val()!='')
{
s.saveButton.removeAttr('disabled').removeClass('disabled');
}
else
s.saveButton.attr('disabled','disabled').addClass('disabled');
},
ClearFields:function()
{
$('input,textarea').val('');
this.FieldsCheck();
}
};
$(function(){
AddEvent.init(s);
});
i am impletenting this example http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/
but each time when i type in my input field at this line i get undefined in alert
alert(s.eventName.attr('name'));
please tell me what am i doing wrong i tried to search but couldnt find anything usefull.
edit: here i created a little jsfiddle i am getting
TypeError: this.settings is undefined
[Break On This Error]
console.log(this.settings.eventName.attr('id'));
thanks

Your problem is here :
var s;
AddEvent.init(s);
There is no way after this to have s defined.
A solution would be to simply not pass s (and no declare it in the arguments of the function) :
init:function(s){
s = this.settings;
...
AddEvent.init();
But that lets a variable polluting the global namespace.
If you want your settings to be accessed from all your functions, you could embed in in a closure :
var AddEvent = (function(){
var settings;
return {
init:function(){
settings = {
saveButton : $('#uploadfiles1'),
cancelSpeech : $('.cancelSpeech'),
datePicker : $(".datepicker"),
eventName : $('input[name=eventname]'),
eventDate : $('input[name=eventdate]')
};
this.BindEvents();
$('.Wallpapers').addClass('active');
$('input, textarea').placeholder();
},
BindEvents:function(){
this.CancelButton();
this.DatePicker();
// this.SaveButton();
$('input[type=text],textarea').on('keyup change',function(){
AddEvent.FieldsCheck();
});
},
CancelButton: function()
{
settings.cancelSpeech.on('click',function(){
var referrer = document.referrer;
window.location = referrer;
});
},
DatePicker :function()
{
settings.datePicker.datepicker({
//defaultDate: +7,
showOtherMonths: true,
autoSize: true,
//appendText: '(dd-mm-yyyy)',
dateFormat: 'dd/mm/yy'
});
},
SaveButton: function()
{
this.ClearFields();
},
FieldsCheck: function()
{
alert(settings.eventName.attr('name'));
if(settings.eventName.val()!='' && settings.eventDate.val() !='' && $('textarea').val()!='')
{
settings.saveButton.removeAttr('disabled').removeClass('disabled');
}
else
settings.saveButton.attr('disabled','disabled').addClass('disabled');
},
ClearFields:function()
{
$('input,textarea').val('');
this.FieldsCheck();
}
}
})();
$(function(){
AddEvent.init();
});

Develop Reference

JavaScript is the programming language of the Web.

using two fancybox methods together - javascript

Related

ReferenceError: jQuery is not defined in main.js file

use events after loading script

Javascript functions in custom namespaces

How to call a script on success of $.ajax

first time implementing module pattern variable is undefined

Categories

Resources