I'm working on a site with modified code. Basically, at the moment, when the document is clicked slide down text boxes slide back up trigger an animation, and then slide back down. However, I have a paypal link in one text box, so I need the event to be triggered only by link click and not document.onclick.
The site is www.sukhavatiyoga.com
Here is an example of the jquery (need to change the document.onclick to something like nav.onclick, I've tried but I think I'm doing something wrong):
- var dropdownClosed = true;
var dropdownOpen = false;
var dropdownSection = '';
var openAfterClose = "";
document.onclick = HandleMouseDown;
function ShowDropdown(section)
{
if (!dropdownClosed)
return;
dropdownClosed = false;
document.onclick = function() { };
CloseAllSections();
if (section == "about")
$("#poppies").animate({ "background-position" : "1038px 0px" }, 700),
$("#flowers").animate({ "left" : "-1038px" }, 500, function() { $("#" + section + "Copy").slideDown("normal", function() { dropdownSection = section; document.onclick = HandleMouseDown;}) });
else if (section == "payment")
$("#poppies").animate({ "background-position" : "1038px 0px" }, 700),
$("#flowers").animate({ "left" : "-1038px"}, 500, function() { $("#" + section + "Copy").slideDown("normal", function() { dropdownSection = section; document.onclick = HandleMouseDown;}) });
else
{
$("#poppies").animate({ "background-position" : "1038px 0px" }, 700),
$("#flowers").animate({ "left" : "-1038px" }, 500, function() { $("#" + section + "Copy").slideDown("normal", function() { dropdownSection = section; document.onclick = HandleMouseDown;}) });
}
}
function CloseAllSections()
{
$("#aboutCopy").hide();
$("#teachersCopy").hide();
$("#newsCopy").hide();
$("#retreatsCopy").hide();
$("#trainingCopy").hide();
$("#paymentCopy").hide();
$("#yttCopy").hide();
$("#ayttCopy").hide();
$("#workshopsCopy").hide();
$("#flowers").css({ "left" : "0px" });
$("#poppies").css({ "background-position" : "0px 0px" });
}
function HideDropdown()
{
if (!dropdownClosed)
{
if (dropdownSection != '')
$("#" + dropdownSection + "Copy").slideUp("fast", function() { $("#flowers").animate({"left" : "0px" }, 700, HandleDropdownClose);
$("#poppies").animate({ "background-position": "0px 0px"}, 700);} );
}
}
function HandleDropdownClose()
{
dropdownClosed = true;
dropdownSection = '';
CloseAllSections();
if (openAfterClose != "")
{
ShowDropdown(openAfterClose);
openAfterClose = "";
}
}
function HandleMouseDown(e)
{
if (!e) e = window.event;
var el = e.target || e.srcElement;
if ($(el).hasClass("about"))
openAfterClose = "about";
else if ($(el).hasClass("teachers"))
openAfterClose = "teachers";
else if ($(el).hasClass("retreats"))
openAfterClose = "retreats";
else if ($(el).hasClass("payment"))
openAfterClose = "payment";
else if ($(el).hasClass("ytt"))
openAfterClose = "ytt";
else if ($(el).hasClass("aytt"))
openAfterClose = "aytt";
else if ($(el).hasClass("workshops"))
openAfterClose = "workshops";
if (!$(el).hasClass("scrollCopy"))
HideDropdown();
}
Any help would be greatly appreciated!