Develop Reference

How do I get this function to work with my template

I got a function that works on another website, but somehow it won't work with this (free) template I am using.
The main js file groups all functions together somehow and just pasting the code in the main.js file gives me a dropdown is not defined.
My function:
dropdown = function(e){
var obj = $(e+'.dropdown');
var btn = obj.find('.btn-selector');
var dd = obj.find('ul');
var opt = dd.find('li');
obj.on("mouseenter", function() {
dd.show();
}).on("mouseleave", function() {
dd.hide();
})
opt.on("click", function() {
dd.hide();
var txt = $(this).text();
opt.removeClass("active");
$(this).addClass("active");
btn.text(txt);
});
}
Then inside a document ready wrap I call:
dropdown('#lang-selector');
For the following HTML code:
<div id="lang-selector" class="dropdown">
NL
<ul>
<li>EN</li>
<li>NL</li>
</ul>
</div>
This is a working function in that template:
// custom theme
var CustomTheme = function () {
var _initInstances = function () {
if ($('.vk-home-dark').length) {
$('#scrollUp').addClass('inverse');
}
};
return {
init: function () {
_initInstances();
}
};
}();
Which is then called like this:
$(document).ready(function(){
PreLoader.init();
CustomTheme.init();
MediaPlayer.init();
});
I tried turning dropdown to a variable by adding var before it and then calling dropdown.init(); but this gave me dropdown.init(); is not a function
How can I make it work like the other functions?
Preloader function as requested:
// preloader
var PreLoader = function () {
var _initInstances = function () {
$('.animsition').animsition({
// loadingClass: 'loader',
inDuration: 900,
outDuration: 500,
linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([href^="javascript:void(0);"])',
});
};
return {
init: function () {
_initInstances();
}
};
}();

jquery dialog cause other function not working

I have a OK button, when click it, it calls hideTyre(). the hideTyre() function calls SetBankFees function.
I also have $("#dialog-immpay").dialog() and $("#dialog-SelectFees").dialog().
The problem is that when I place hideTyre() before the two dialog(), OK button click cannot found the hideTyre(),
if I place the hideTyre() after the two dialog(), then hideTyre() is executed, but I got another error, it says the SetBankFees() is undefined.
Although the two dialog() work fine here, I guess the two dialog() cause the problem. But I could not figure out whats wrong there.
I appreciate your help very much.
<script>
...more js functions
function SetBankFees()
{
`enter code here` }
`enter code here` ...more js functions
function hideTyre()
{
SetBankFees();
$("#tyreDiv").hide();
$(".main").show();
}
var immPayF8OrF9 = "";
$("#dialog-immpay").dialog({
autoOpen: false,
height: 400,
width: 750,
modal: true,
dialogClass: "no-close",
buttons: {
"Save without Print Invoice": function () {
allFields.removeClass("ui-state-error");
FImmPay = immPay_Payment;
FComp = immPay_Comp;
FImmPayDate = CCDateStrToJDate($("#datePay").val());
FCompDate = CCDateStrToJDate($("#dateCom").val());
if ((FImmPay > 0.005) || (FComp > 0.005))
{
FSaveImmPay = true;
FImmPayReceipt = immPay_Receipt;
}
else
FSaveImmPay = false;
FPrtInv = immPay_PrtInv;
$(this).dialog("close");
},
"print all unissued invoices": function () {
allFields.removeClass("ui-state-error");
FImmPay = immPay_Payment;
FComp = immPay_Comp;
FImmPayDate = CCDateStrToJDate($("#datePay").val());
FCompDate = CCDateStrToJDate($("#dateCom").val());
if ((FImmPay > 0.005) || (FComp > 0.005))
{
FSaveImmPay = true;
FImmPayReceipt = immPay_Receipt;
}
else
FSaveImmPay = false;
immPayF8OrF9 = "F8";
$(this).dialog("close");
},
"print last invoice only": function () {
allFields.removeClass("ui-state-error");
FImmPay = immPay_Payment;
FComp = immPay_Comp;
FImmPayDate = CCDateStrToJDate($("#datePay").val());
FCompDate = CCDateStrToJDate($("#dateCom").val());
if ((FImmPay > 0.005) || (FComp > 0.005))
{
FSaveImmPay = true;
FImmPayReceipt = immPay_Receipt;
}
else
FSaveImmPay = false;
immPayF8OrF9 = "F9";
$(this).dialog("close");
},
"Esc": function () {
$(this).dialog("close");
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
if (immPayF8OrF9 == "")
DoAfterDoImmPay();
else
ShowOption("#dialog-showPrintingOption", OriInvOption);
}
});
$("#dialog-SelectFees").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Select the fee" : function () {
allFields.removeClass("ui-state-error");
$(this).dialog("close");
AddRow(y);
},
"Cancel" : function(){
allFields.removeClass("ui-state-error");
$(this).dialog("close");
}
}
});
});
// if leave hideTyre() here, then error SetBankFees(); is undefined
// function hideTyre()
// {
// SetBankFees();
// $("#tyreDiv").hide();
// $(".main").show();
// }
...more js functions
</script>
<button onclick="hideTyre()">OK</button>

The problem is function hideTyre() and function SetBankFees() are in different scopes.
SetBankFees() is inside $(function () {}), but hideTyre() is not.
What my findings are the function outside $(function () {}) cannot access the function inside $(function () {}), but function inside $(function () {}) can access the function outside $(function () {}).

Automatically open the lightbox popup upon opening the page

Here's the JS i have:
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("input.osx, a.osx").click(function (e) {
e.preventDefault();
$("#osx-modal-content").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("#osx-modal-content", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});
I'm using this lightbox script for survey and the html includes form,
and this code make the lightbox open by clicking on button, all i need is to use the same lightbox and make it automatically open upon opening the page.
Thanks in advance

You can just trigger click() programatically on a button that shows the popup after page loads.
Example:
$(function () {
$('your_button').click();
})

jQueryUI dialog wth dynamic buttons using callbacks

I am using this question as the basis for a multipurpose jQueryUI dialog function that I can reuse in my site Question 17013222 I want to be able to reuse the code to display different buttons with callbacks defined in the function call
However, I don’t get the result I need when extending this answer to use a callback function. The callback function is running as I build the dynamic buttons instead of when the Dialog Save button is pressed.
I have a jsFiddle here that shows my incompetence jsFiddle
What do I need to do to get the callback to run as the Save button is clicked?
Below is the simplified code snippet
function showDialog(inToDisplay, inTitle, buttonSetup, inSaveCallback) {
'use strict';
var dialog_buttons = {};
$('#jqDialog').load(inToDisplay + '.asp', function () {
$(this).attr('title', inTitle);
/*Build our button choices*/
if (buttonSetup === 'closeonly') {
dialog_buttons['Close'] = function () {
$(this).dialog("close");
$(this).dialog("destroy");
}
} else if (buttonSetup === 'savecancel') {
dialog_buttons['Save'] = function () {
if (inSaveCallback && typeof (inSaveCallback) === "function") {
inSaveCallback;
};
$(this).dialog("close");
$(this).dialog("destroy");
}
dialog_buttons['Close'] = function () {
$(this).dialog("close");
$(this).dialog("destroy");
}
}
$(this).dialog({
autoOpen: false,
modal: true,
open: function (event, ui) {
},
buttons: dialog_buttons
});
$('#jqDialog').dialog('open');
});
}
function saveAnswer() {
alert('ToDo: Save data here');
}
$(document).ready(function () {
showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer());
});

here... http://jsfiddle.net/reigel/zpyNM/
change this
$(document).ready(function () {
showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer); // remove () on saveAnswer...
});
and this
dialog_buttons['Save'] = function () {
if (inSaveCallback && typeof (inSaveCallback) === "function") {
inSaveCallback(); // add -->> ()
};
$(this).dialog("close");
$(this).dialog("destroy");
}

Return a value from JQuery Widget

I have created a JQuery Widget to pop-up a dialogue box and to alow values to be accepted from that dialogue box
My Function defining Dialogue close
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
});
}
How to get the returnText value in the html page at the time of closing dialogue?
I tried calling the variable in the html but it return null since the dialogue is nor opened or closed. I want to receive the data in Html at the time of dialogue close
Widget
$.widget('custom.DivPopUp', {
//Call Constructor
_create: function () {
var returnText;
this._ebDefineDiv();
},
_ebDefineDiv: function () {
if ($("#ebDialogue_div").length == 0) {
//Bringing Dialogue box
$("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";
$('#ebDialogue_div').append(inDialogueDiv);
this._ebCreateDialoge();
this._ebSaveDialogue();
}
},
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
});
}
}(jQuery));
Html
$('#Id').DivPopUp();

Using JQuery, you can trigger a custom event.
An example according to your code:
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
$('#ebDialogue_div').trigger('save_action', returnText);
});
}
Then, from any other point in your script, you set an event listener for that event
$('#ebDialogue_div').on('save_action', function(event, returnText){
alert(returnText);
});

You need to add a callback
so
$.widget('custom.DivPopUp', {
//Call Constructor
_create: function () {
var returnText;
this._ebDefineDiv();
},
_ebDefineDiv: function () {
if ($("#ebDialogue_div").length == 0) {
//Bringing Dialogue box
$("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";
$('#ebDialogue_div').append(inDialogueDiv);
this._ebCreateDialoge();
this._ebSaveDialogue();
}
},
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
this._trigger( "complete", null, { value: 100 } );
});
}
}(jQuery));
then
$('#Id').DivPopUp({complete:function(event, data) {
var returnText = data.value;
}});