How can I combine these two jQuery functions ? or the .js . Trying to put them together in the same page makes the latter not work at all.
They work just fine for their job if I only use one on the page, but I need them both.
The first one I have is:
(function ($) {
$(document).ready(function () {
// Dropdown Menu
if (!($.browser.msie && ($.browser.version == 6))) {
$("ul#topnav li:has(ul)").addClass("dropdown");
}
$("ul#topnav li.dropdown").hover(function () {
$('ul:first', this).css({
visibility: "visible",
display: "none"
}).slideDown('normal');
}, function () {
$('ul:first', this).css({
visibility: "hidden"
});
});
$("div.prod_hold").hover(function () {
$('.info', this).css({
visibility: "visible",
display: "none"
}).slideDown('normal');
}, function () {
$('.info', this).css({
visibility: "hidden"
});
});
$("li.cat_hold").hover(function () {
$('.info', this).fadeIn(300);
}, function () {
$('.info', this).fadeOut(200);
});
$("li.side_cart").hover(function () {
$('#cart', this).fadeIn(500);
}, function () {
$('#cart', this).fadeOut(200);
});
$("li.side_currency").hover(function () {
$('#currency', this).fadeIn(500);
}, function () {
$('#currency', this).fadeOut(200);
});
$("li.side_lang").hover(function () {
$('#language', this).fadeIn(500);
}, function () {
$('#language', this).fadeOut(200);
});
$("li.side_search").hover(function () {
$('#search', this).fadeIn(500);
}, function () {
$('#search', this).fadeOut(200);
});
$(".main_menu li").hover(function () {
$('.secondary', this).fadeIn(500);
}, function () {
$('.secondary', this).fadeOut(200);
});
$(".cat_right ul li a").hover(function () {
$(this).stop().animate({
paddingLeft: 20,
color: '#ccc'
}, "fast")
}, function () {
$(this).stop().animate({
paddingLeft: 10,
color: '#999'
}, "fast")
});
// Tipsy - tooltips jQuery plugin
$('a.wish_button, a.compare_button, a#button-cart, a.twitter_follow').tipsy({
gravity: 's',
fade: true,
title: function () {
return this.getAttribute('original-title').toUpperCase();
}
});
$('#service_links li a').tipsy({
gravity: 'e',
fade: true,
title: function () {
return this.getAttribute('original-title').toUpperCase();
}
});
// SLIDING ELEMENTS
$("ul.categories li, #sidebar ul.secondary_menu li").hover(function () {
$("a", this).stop().animate({
left: "15px"
}, {
queue: false,
duration: 200
});
}, function () {
$("a", this).stop().animate({
left: "0px"
}, {
queue: false,
duration: 200
});
});
// FADING ELEMENTS
$(".logo img, .oferta_s, .oferta_d").hover(function () {
$(this).stop().animate({
opacity: 0.6
}, "medium")
}, function () {
$(this).stop().animate({
opacity: 1
}, "medium")
});
$(".intro").hover(function () {
$(this).stop().animate({
paddingBottom: 230
}, "medium")
}, function () {
$(this).stop().animate({
paddingBottom: 140
}, "slow")
});
$(".desc_box,.desc_box2").hover(function () {
$(".desc_box,.desc_box2").not(this).stop().animate({
opacity: 0.7
}, "fast")
}, function () {
$(".desc_box,.desc_box2").not(this).stop().animate({
opacity: 1
}, "fast")
});
});
})(window.jQuery);
// non jQuery scripts below
$(document).ready(function () {
var interval;
$('ul#myRoundabout').roundabout({
'btnNext': '.next_round',
'btnPrev': '.previous_round'
}).hover(
function () {
clearInterval(interval);
}, function () {
interval = startAutoPlay();
});
interval = startAutoPlay();
});
function startAutoPlay() {
return setInterval(function () {
$('ul#myRoundabout').roundabout_animateToPreviousChild();
}, 6000);
}
When I add this second code the problems start.. and the code is :
<!-- Validate email using regular expression -->
function validateEmail(emailValue) {
var emailPattern = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]#[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
return emailPattern.test(emailValue);
}
<!-- Validate Form fields -->
function validateForm() {
var send_message = true;
if (jQuery("textarea#message").val().length < 2) {
jQuery("label#message_error").slideDown();
jQuery("textarea#message").focus();
send_message = false;
}
if (!validateEmail(jQuery("input#email").val())) {
jQuery("label#email_error").slideDown();
jQuery("input#email").focus();
send_message = false;
}
if (jQuery("input#name").val().length < 2) {
jQuery("label#name_error").slideDown();
jQuery("input#name").focus();
send_message = false;
}
return send_message;
}
jQuery(function () {
<!-- Contact Form validation -->
jQuery('.error').hide();
jQuery("input#name").bind("keyup focusout", function () {
if (jQuery(this).val().length > 1) {
jQuery("label#name_error").slideUp();
} else {
jQuery("label#name_error").slideDown();
}
});
jQuery("input#email").bind("keyup focusout", function () {
if (validateEmail(jQuery(this).val())) {
jQuery("label#email_error").slideUp();
} else {
jQuery("label#email_error").slideDown();
}
});
jQuery("textarea#message").bind("keyup focusout", function () {
if (jQuery(this).val().length > 1) {
jQuery("label#message_error").slideUp();
} else {
jQuery("label#message_error").slideDown();
}
});
<!-- Submitting Contact Form -->
jQuery("form#contact_form").submit(function () {
var dataString = jQuery(this).serialize();
if (validateForm()) {
jQuery.ajax({
type: "POST",
url: "FormToEmail.php",
data: dataString,
success: function () {
jQuery('#contact_form').slideUp('slow', function () {
jQuery(this).html("<div id='confirmation'></div>");
jQuery('#confirmation').html("<h4>Mesajul a fost trimis cu succes!</h4>").append("<p>Va multumim pentru ca ne-ati contactat. Va vom raspunde la e-mail in cel mai scurt timp posibil!</p>");
Cufon.refresh();
jQuery(this).slideDown('slow');
})
}
});
}
return false;
});
})
* EDIT *
The problem has been fixed, it was the comments. Changed the <!-- comm --> into /* comm */ and it works just fine. Thank you all for your time and help!
Related
My code is working properly but I feel it is tedious that everytime I have to a new list item I have to add the numbered corresponding functions. I was wondering if there was a JS trick that can do the whole script instead of me repeating the code each time. So here is the first example
$(document).ready(function () {
$(".btn-slide_1").click(function () {
$("#panel_1").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_2").click(function () {
$("#panel_2").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_3").click(function () {
$("#panel_3").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_4").click(function () {
$("#panel_4").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_5").click(function () {
$("#panel_5").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_6").click(function () {
$("#panel_6").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_7").click(function () {
$("#panel_7").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_8").click(function () {
$("#panel_8").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_9").click(function () {
$("#panel_9").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_10").click(function () {
$("#panel_10").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_11").click(function () {
$("#panel_11").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_12").click(function () {
$("#panel_12").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_13").click(function () {
$("#panel_13").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_14").click(function () {
$("#panel_14").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_15").click(function () {
$("#panel_15").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_16").click(function () {
$("#panel_16").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_17").click(function () {
$("#panel_17").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
$(".btn-slide_18").click(function () {
$("#panel_18").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
});
So it also linked to another div item, it is kind of a domino or accordion for the code above. So the code is very repeteative, but I fear it dosn't work if I don't repeat it in this way, but I am convinced that there is a much more rational way to make these functions work.
var isAboutToggled = false;
$(document).ready(function () {
$(".btn-slide-1").click(function () {
$("#panel-1").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
});
$(document).ready(function () {
$(".btn-slide-2").click(function () {
$("#panel-2").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
});
$(document).ready(function () {
$(".btn-slide-3").click(function () {
$("#panel-3").animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
});
$(document).ready(function () {
$("#panel-1").click(function () {
$("#panel-1").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-4").click(function () {
$("#panel-4").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-5").click(function () {
$("#panel-5").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-6").click(function () {
$("#panel-6").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-7").click(function () {
$("#panel-7").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-8").click(function () {
$("#panel-8").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-9").click(function () {
$("#panel-9").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-10").click(function () {
$("#panel-10").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-11").click(function () {
$("#panel-11").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-12").click(function () {
$("#panel-12").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-13").click(function () {
$("#panel-13").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-14").click(function () {
$("#panel-14").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-15").click(function () {
$("#panel-15").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-16").click(function () {
$("#panel-16").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-17").click(function () {
$("#panel-17").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
$(document).ready(function () {
$("#panel-18").click(function () {
$("#panel-18").animate({
width: 'toggle'
});
});
});
$(document).ready(function () {
$(this).toggleClass("hide");
return false;
});
As comments suggested, you should use one collective class to all elements, then do your other code upon them all. However thinking like a programmer, it should be obvious that the number could be used as parameter.
for (var i = 1; i <= 20; i++) {
$(".btn-slide_" + i).click(function() {
$("#panel_" + i).animate({
width: 'toggle'
});
$(this).toggleClass("active");
return false;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But again, it's better to use one querySelectorAll('.by-come-class').forEach(function(elem) { /* do stuff with elem */ })
i am having an issue trying to reenable a scrollmagic controller if it has been disabled before.
i want to have the logo color change only triggered if its a narrow viewport (if the logo is in the colored area) and disabled if its wide..that works so far
but if i resize the window to narrow again it won't reenable the controller..i tried to destroy and reset the controller as well but somehow it won't reenable the controller...
codepen (gsap and scrollmagic used):
https://codepen.io/HendrikEng/pen/owyBYz?editors=0011
js:
const mobile = {
controller: new ScrollMagic.Controller(),
changeLogo: {
init: () => {
console.log("init tweens an scrollmagic");
const tweens = {
enterOuter: () => {
TweenMax.fromTo(
".c-logo__outer",
1,
{ fill: "#4dabfc" },
{ fill: "#fff" }
);
},
enterInner: () => {
TweenMax.fromTo(
".c-logo__inner",
1,
{ fill: "#fff" },
{ fill: "#4dabfc" }
);
},
leaveOuter: () => {
TweenMax.fromTo(
".c-logo__outer",
1,
{ fill: "#fff" },
{ fill: "#4dabfc" }
);
},
leaveInner: () => {
TweenMax.fromTo(
".c-logo__inner",
1,
{ fill: "#4dabfc" },
{ fill: "#fff" }
);
}
};
const trigger = document.querySelectorAll(".js-change-logo");
trigger.forEach(id => {
const scene = new ScrollMagic.Scene({
triggerElement: id,
reverse: true,
triggerHook: 0.065,
duration: id.clientHeight
})
.on("enter", () => {
tweens.enterOuter();
tweens.enterInner();
})
.on("leave", () => {
tweens.leaveOuter();
tweens.leaveInner();
})
.addIndicators()
.addTo(mobile.controller);
});
},
destroyTweens: () => {
console.log("kill tweens");
TweenMax.killTweensOf(".c-logo__outer");
TweenMax.killTweensOf(".c-logo__inner");
TweenMax.set(".c-logo__outer", { clearProps: "all" });
TweenMax.set(".c-logo__inner", { clearProps: "all" });
}
}
};
$(window).on("resize", function() {
var win = $(this); //this = window
if (win.width() <= 450) {
// reanble controller if disabledbed before - doesnt work
mobile.controller.enabled(true);
mobile.changeLogo.init();
} else {
// disable scrollmagic controller
mobile.controller.enabled(false);
// destroy tweens
mobile.changeLogo.destroyTweens();
}
}).resize();
#hendrikeng I hope you don't mind, but I changed your code quite a lot. I've found myself needing to do this exact thing numerous times recently, so I based a lot of it on my own work.
I think the largest issue was that you were running a lot of functions on every resize which is not very performant and also makes it difficult to keep track of what's initialised and what's not. Mine relies on an init_flag so that it is only setup once.
There are then methods to update (duration on resize if needed) and destroy.
https://codepen.io/motionimaging/pen/848366af015cdf3a90de5fb395193502/?editors=0100
const mobile = {
init_flag: false,
init: () => {
$(window).on('resize', function(){
const width = $(window).width();
if( width <= 450 ){
if(! mobile.init_flag ){
mobile.setup();
} else {
mobile.update();
}
} else {
if( mobile.init_flag ){
mobile.destroy();
}
}
});
},
setup: () => {
mobile.init_flag = true;
mobile.triggers = document.querySelectorAll('.js-change-logo');
const tweens = {
enterOuter: () => {
TweenMax.fromTo(
'.c-logo__outer',
1,
{ fill: '#4dabfc' },
{ fill: '#fff' }
);
},
enterInner: () => {
TweenMax.fromTo(
'.c-logo__inner',
1,
{ fill: '#fff' },
{ fill: '#4dabfc' }
);
},
leaveOuter: () => {
TweenMax.fromTo(
'.c-logo__outer',
1,
{ fill: '#fff' },
{ fill: '#4dabfc' }
);
},
leaveInner: () => {
TweenMax.fromTo(
'.c-logo__inner',
1,
{ fill: '#4dabfc' },
{ fill: '#fff' }
);
}
};
mobile.controller = new ScrollMagic.Controller();
mobile.triggers.forEach(el => {
el.scene = new ScrollMagic.Scene({
triggerElement: el,
reverse: true,
triggerHook: 0.065,
duration: el.clientHeight
})
.on('enter', () => {
tweens.enterOuter();
tweens.enterInner();
})
.on('leave', () => {
tweens.leaveOuter();
tweens.leaveInner();
})
.addIndicators()
.addTo(mobile.controller);
});
},
update: () => {
if( mobile.init_flag ){
mobile.triggers.forEach(el => {
el.scene.duration(el.clientHeight);
});
}
},
destroy: function(){
mobile.controller.destroy(true);
mobile.init_flag = false;
$('.c-logo > *').attr('style', '');
},
};
mobile.init();
I have used Durandal.js for my SPA. I need to have slideshow of Images as background in certain pages, for which I am using jquery-backstretch. I am fetching images from my web back-end. Everything works fine while navigating between pages in normal speed. But, when I navigate from one of the pages which has backstretch to another one with backstretch very rapidly, Images from backstretch in first page also creeps in second page. When I debugged, only the correct Images were being passed to second page. And also the slideshow is not running in a proper interval. So it must be both the backstretches being invoked.
Please tell me how I can stop the previous backstretch from appearing again. Here are the relevant code snippets.
This is my first page's(with backstretch) viewmodel code.
var id = 0;
var backstetcharray;
function loadbackstretchb() {
backstetcharray = new Array();
$.each(that.products, function (i, item)
{
if(item.ProductBackImage != "")
{
backstetcharray.push("xxxxxxxxxx" + item.ProductBackImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var location;
function callback() {
window.location.href = "#individual/"+id;
// this.deactivate();
};
return {
products: ko.observableArray([]),
activate: function () {
currentpage = "products";
that = this;
return http.get('yyyyyyyyyyyyyyy').then(function (response) {
that.products = response;
loadbackstretchb();
});
},
attached: function () {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
//setTimeout($(".mainmenucont").effect("slide", null, 1000), 1000);
$(document).on("click", ".ind1", function (e) {
// alert("ind1");
id = e.target.id;
// $(".mainmenucont").effect("drop", null, 2000, callback(e.target.id));
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, callback);
});
}
}
});
This is my second page's(with backstretch) viewmodel code.(To where I am navigating)
var recs;
var open;
var i, count;
var backstetcharray;
function loadbackstretchc() {
backstetcharray = new Array();
$.each(recs, function (i, item) {
if (item.BackgroundImage != "") {
backstetcharray.push("xxxxxxxxxx" + item.BackgroundImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var system = require('durandal/system');
var location;
function menucallback() {
window.location.href = location;
// this.deactivate();
};
return {
activate: function (val) {
currentpage = "recipes";
open = val;
that = this;
var pdts;
recs;
var recipeJson = [];
http.get('yyyyyyyyyyyyyy').then(function (response) {
pdts = response;
http.get('yyyyyyyyyyyy').then(function (response1) {
recs = response1;
loadbackstretchc();
$.each(pdts, function (i, item) {
var json = [];
$.each(recs, function (j, jtem) {
if (item.DocumentTypeId == jtem.BelongstoProduct) {
json.push(jtem);
}
});
jsonitem = {}
jsonitem["product"] = item.ProductName;
jsonitem["link"] = "#" + item.UmbracoUrl;
jsonitem["target"] = item.UmbracoUrl;
jsonitem["recipes"] = json;
recipeJson.push(jsonitem);
});
// that.products = recipeJson;
count = recipeJson.length;
i = 0;
return that.products(recipeJson);
});
});
},
attached: function(view) {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
$(document).on("click", ".recipeclick", function (e) {
console.log(e);
location = "#recipe/" + e.target.id;
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, menucallback);
});
$(document).on("click", ".locclick", function (e) {
if (e.handled != true) {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
e.handled = true;
}
});
},
products: ko.observableArray([]),
expand: function() {
++i;
if (i == count) {
$("#" + open).addClass("in");
}
}
};
});
I'm trying to animate a view, I'm inserting this code into a js but I have problems on the line 84, in:
function trigger_accordion(item-slide) {
if(!(item-slide.is(':animated'))) {
item-slide.trigger('open');
}
}
The error is printed: Uncaught SyntaxError: Unexpected token function
Attach the full code:
(function ($, Drupal) {
var animation = {
'auto_animate': true,
'auto_animate_delay': 8000,
'auto_animate_id': '',
'caption_speed': 'fast',
//'panel_speed': 'slow',
'panel_speed': 1000,
'panel_easing': 'easeInOutCubic'
}
Drupal.behaviors.pamh_theme = {
attach: function(context, settings) {
$(document).ready(function(){
var i = 1;
$('.item-slide').each(function(key, value) {
$(value).attr('id', 'item-slide-'+i);
i++;
});
$('.slide_caption').hide();
$('#item-slide-1 > .slide_caption').show();
$('#item-slide-1').addClass('active');
$('.item-slide').not('.active').children('.slide_image_slice').show();
});
$('.item-slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({right: "-=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
setTimeout(function(){hide_slices()},1);
display_caption();
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({right: "+=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
$(this).prev().trigger('close');
}
});
$('.item-slide')
.hoverIntent(
function() {
animation.auto_animate = false;
trigger_accordion($(this));
},
function() {
animation.auto_animate = true;
clearInterval(animation.auto_animate_id);
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
)
.click(function() {
trigger_accordion($(this));
});
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
};
function trigger_accordion(item-slide) {
if(!(item-slide.is(':animated'))) {
item-slide.trigger('open');
}
}
function display_caption() {
$('.slide_caption').each(function() {
if(!($(this).parent().hasClass('active'))) {
$(this).fadeOut('fast', function() {
$('.item-slide.active > .slide_caption').fadeIn(animation.caption_speed);
});
}
});
}
function hide_slices() {
$('.slide_image_slice').each(function() {
if($(this).parent().hasClass('active')) {
$(this).fadeOut('fast');
}
});
}
function display_slices() {
$('.slide_image_slice').each(function() {
if(!$(this).parent().hasClass('active') && !$(this).is(":visible")) {
$(this).fadeIn('fast');
}
});
}
function slideshow_animate() {
if(!animation.auto_animate) return;
var next_slide = $('.item-slide.active').next();
if(!next_slide.length) {
next_slide = $('#item-slide-1');
}
next_slide.click();
}
};
})(jQuery, Drupal);
Two things:
You cannot name javascript variables with the - character like you did with item-slide. It is OK with CSS classes, but with javascript you have to find something else.
You had a misplaced closing bracket }. Here is the full code that works for me:
(function ($, Drupal) {
var animation = {
'auto_animate': true,
'auto_animate_delay': 8000,
'auto_animate_id': '',
'caption_speed': 'fast',
//'panel_speed': 'slow',
'panel_speed': 1000,
'panel_easing': 'easeInOutCubic'
}
Drupal.behaviors.pamh_theme = {
attach: function(context, settings) {
$(document).ready(function(){
var i = 1;
$('.item-slide').each(function(key, value) {
$(value).attr('id', 'item-slide-'+i);
i++;
});
$('.slide_caption').hide();
$('#item-slide-1 > .slide_caption').show();
$('#item-slide-1').addClass('active');
$('.item-slide').not('.active').children('.slide_image_slice').show();
});
$('.item-slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({right: "-=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
setTimeout(function(){hide_slices()},1);
display_caption();
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({right: "+=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
$(this).prev().trigger('close');
}
});
$('.item-slide')
.hoverIntent(
function() {
animation.auto_animate = false;
trigger_accordion($(this));
},
function() {
animation.auto_animate = true;
clearInterval(animation.auto_animate_id);
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
)
.click(function() {
trigger_accordion($(this));
});
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
};
function trigger_accordion(itemSlide) {
if(!(itemSlide.is(':animated'))) {
itemSlide.trigger('open');
}
}
function display_caption() {
$('.slide_caption').each(function() {
if(!($(this).parent().hasClass('active'))) {
$(this).fadeOut('fast', function() {
$('.item-slide.active > .slide_caption').fadeIn(animation.caption_speed);
});
}
});
}
function hide_slices() {
$('.slide_image_slice').each(function() {
if($(this).parent().hasClass('active')) {
$(this).fadeOut('fast');
}
});
}
function display_slices() {
$('.slide_image_slice').each(function() {
if(!$(this).parent().hasClass('active') && !$(this).is(":visible")) {
$(this).fadeIn('fast');
}
});
}
function slideshow_animate() {
if(!animation.auto_animate) return;
var next_slide = $('.item-slide.active').next();
if(!next_slide.length) {
next_slide = $('#item-slide-1');
}
next_slide.click();
}
})(jQuery, Drupal);
I have this:
$("#about-us .faq-cta").click(function () {
$('#faq').load('faqs.html #main').delay(100).slideToggle('1000', "easeOutQuad", function () {
$.waypoints('refresh');
$("#siteNav li a").removeClass("siteNavSelected");
}, {
offset: function () {
return $.waypoints('viewportHeight') - $(this).outerHeight();
}
});
});
And this:
if (window.location.hash.toLowerCase() === "#faq") {
$("#about-us .faqCta").click(function () {
$('#faq').load('faqs.html #main').delay(100).slideToggle('1000', "easeOutQuad", function () {
$.waypoints('refresh');
$("#siteNav li a").removeClass("siteNavSelected");
}, {
offset: function () {
return $.waypoints('viewportHeight') - $(this).outerHeight();
}
});
});
}
Each do exactly the same thing.
Is there a way to write a bit of shorthand to combine the two?
Use:
var fcOnClick = function () {
$('#faq').load('faqs.html #main').delay(100).slideToggle('1000', "easeOutQuad", function () {
$.waypoints('refresh');
$("#siteNav li a").removeClass("siteNavSelected");
}, {
offset: function () {
return $.waypoints('viewportHeight') - $(this).outerHeight();
}
});
};
var $cont= $('#about-us');
$('.faq-cta',$cont).click(fcOnClick);
if(window.location.hash.toLowerCase() === "#faq"){
$('.faqCta',$cont).click(fcOnClick);
}