Related
I have a woocommerce site that uses light-box products with AJAX filters.
To access the light box a quick-view button appears when you hover over the product.
When I load an AJAX filter the light-box quick-view button is no longer clickable.
I need to add the code to the button after the AJAX load.
Below is the function that the theme uses.
85: function(t, e) {
"use strict";
Flatsome.behavior("quick-view", {
attach: function(t) {
jQuery(".quick-view", t).each(function(t, e) {
jQuery(e).hasClass("quick-view-added") || (jQuery(e).click(function(t) {
if ("" != jQuery(this).attr("data-prod")) {
jQuery(this).parent().parent().addClass("processing");
var e = jQuery(this).attr("data-prod"),
i = {
action: "flatsome_quickview",
product: e
};
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
jQuery(".processing").removeClass("processing"), jQuery.magnificPopup.open({
removalDelay: 300,
closeBtnInside: !0,
autoFocusLast: !1,
items: {
src: '<div class="product-lightbox lightbox-content">' + t + "</div>",
type: "inline"
}
}), setTimeout(function() {
jQuery(".product-lightbox").imagesLoaded(function() {
jQuery(".product-lightbox .slider").flickity({
cellAlign: "left",
wrapAround: !0,
autoPlay: !1,
prevNextButtons: !0,
adaptiveHeight: !0,
imagesLoaded: !0,
dragThreshold: 15
})
})
}, 300), jQuery(".product-lightbox form").hasClass("variations_form") && jQuery(".product-lightbox form.variations_form").wc_variation_form(), jQuery(".product-lightbox form.variations_form").on("show_variation", function(t, e) {
e.image.src ? (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image.src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0)) : e.image_src && (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image_src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0))
}), jQuery(".product-lightbox .quantity").addQty()
}), t.preventDefault()
}
}), jQuery(e).addClass("quick-view-added"))
})
}
})
}
If you can edit the theme, write the code directly into the success callback:
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
// Code you want to run
// Other code. i.e. jQuery(".processing").removeClass ... etc.
});
Or define the function and call it inside your success() callback.
var myFunction = function() {
// Code to run after success
}
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
myFunction();
// Other code
});
I have multiple jwplayer videos on my page with the following config:
$(function(){
//add attributes to your ".video" DIV placeholder to customimize output
//example: data-autostart="true" - see customSettings Object below.
if (typeof(jwplayer) !== 'undefined'){
$('.video').each(function(){
var vid = $(this),
videoSettings = {},
settings = {
autostart: false,
width: '100%',
aspectratio: '16:9',
image: ''
},
customSettings = {
autostart: vid.attr('data-autostart'),
width: vid.attr('data-width'),
aspectratio: vid.attr('data-aspectratio'),
image: vid.attr('data-image')
};
$.extend(videoSettings, settings, customSettings);
var playerInstance = jwplayer( vid.attr('id') ).setup({
primary: "flash",
file: Drupal.settings.basePath + $(this).attr('data-src'),
autostart: videoSettings.autostart,
aspectratio: videoSettings.aspectratio,
image: Drupal.settings.basePath + videoSettings.image,
skin: "glow",
stretching: "exactfit",
width: videoSettings.width,
ga:{idstring: videoSettings.videotitle,
trackingobject: "pageTracker"
}
});
});
}
});
I have tried to add this:
events: {
onReady: function ()
{
jwplayer($('.video').id).stop();
}
},
but I am getting the following error:
[.PPAPIContext]GL ERROR :GL_INVALID_ENUM : glTexImage2D: target was GL_TEXTURE_RECTANGLE_ARB
is there a way to make all other videos stop when one is played?
It worked for me...
if(typeof jwplayer().stop === "function" ){
jwplayer().stop();
}
I'd like to disable onload the popup and show it only after clicking an url link (onlick="echoSec()" ).
I did the 2nd step, so after pressing the button it works good, but it shows at the page load too. I don't want that.
There is no onload function in the code.
Could you help me?
/*
* Project: jQuery echoSoc - Social Sharer init
* Description: echoSoc is light weight jQuery Plugin for Social Shares.
* Author: dvL-den
* License: Copyrights dvL-den. All rights reserved.
*/
;(function ($, window, document, undefined) {
// Create the defaults once
var pluginName = 'echoSoc';
var defaults = {
title : 'echoSoc Social Sharer',
facebook_button : true,
facebook_url : window.location.origin,
twitter_button : true,
twitter_url : window.location.origin,
twitter_message : 'echoSoc Social Sharer Tweet Message!',
google_button : true,
google_url : window.location.origin,
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
};
// The actual plugin constructor
function EchoSoc(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
EchoSoc.prototype = {
init: function () {
// Plugin HTML Structure
$('body').append( //-->
'<div class="echoSoc_wrap">' +
'<div class="echoSoc_frame">' +
'<div class="echoSoc_title" />' +
'<div class="echoSoc_content">' +
'<div class="echoSoc_description" />' +
'<div class="echoSoc_countdown" />' +
'</div>' +
'</div>' +
'<div class="echoSoc_overlay" />' +
'</div>'
// <--
);
// Title as Text or as Image
$('.echoSoc_title').html(this.options.title);
// Countdown Structure
if (this.options.timeout > 0) {
$('.echoSoc_countdown').html(this.options.message + ' or wait <span />' + ' ' + 'seconds.');
} else {
$('.echoSoc_countdown').html(this.options.message);
}
$('<div />')
.addClass('echoSoc_buttons')
.appendTo('.echoSoc_description');
this._echoTrigger();
if (this.options.timeout > 0)
this._echoTimeout();
if (this.options.close) {
$(document).on('keydown', function (e) {
if (e.keyCode == 27) {
$('.echoSoc_wrap').fadeOut();
}
});
$('.echoSoc_overlay').css('cursor', 'pointer');
$('.echoSoc_overlay').on('click', function () {
$('.echoSoc_wrap').fadeOut();
});
}
},
_echoTrigger: function () {
if (!$.cookie('echoSoc')) {
$('.echoSoc_wrap').show();
$('.echoSoc_frame').fadeIn(500);
$('.echoSoc_overlay').fadeIn(100);
this._echoCenter();
this._echoSwitcher();
this._echoAsync();
this._echoEvents();
}
},
_echoSwitcher: function () {
if (this.options.facebook_button) {
$('<div />')
.addClass('echoFacebook')
.css({ 'width': '48', 'height': '20' })
.appendTo('.echoSoc_buttons');
$('.echoFacebook').append('<fb:like href="' + this.options.facebook_url + '" send="false" layout="button_count" width="50" show_faces="false" colorscheme="light"></fb:like>');
}
if (this.options.twitter_button) {
$('<div />')
.addClass('echoTwitter')
.css('width', '58')
.appendTo('.echoSoc_buttons');
$('.echoTwitter').append('Tweet');
}
if (this.options.google_button) {
$('<div />')
.addClass('echoGoogle')
.css('width', '32')
.appendTo('.echoSoc_buttons');
$('.echoGoogle').append('<g:plusone size="medium" href="' + this.options.google_url + '" callback="googleCB"></g:plusone>');
}
var socButtons = $('.echoSoc_buttons').find('div').length,
socNumber = $.trim(socButtons).slice(0, 1),
socSort_one = $('.echoSoc_buttons > div').eq(0),
socSort_two = $('.echoSoc_buttons > div').eq(1),
socSort_three = $('.echoSoc_buttons > div').eq(2),
buttons_wrap = $('.echoSoc_buttons');
if (socNumber == 3) {
buttons_wrap.css('width', '85%');
socSort_one.add(socSort_three).css('display', 'inline-block');
socSort_one.add(socSort_three).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_two.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_three.css({ 'right': '0' });
}
else if (socNumber == 2) {
buttons_wrap.css('width', '50%');
socSort_one.add(socSort_two).css('display', 'inline-block');
socSort_one.add(socSort_two).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_two.css({ 'right': '0' });
}
else if (socNumber == 1) {
buttons_wrap.css('width', '50%');
socSort_one.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
}
else {
buttons_wrap
.css('text-align', 'center')
.text('Error! Enable at least one Social Button!');
}
},
_echoTimeout: function () {
$('.echoSoc_countdown')
.find('span')
.addClass('timer')
.text(this.options.timeout);
var countdown = $('.timer'),
seconds = $('.timer').text(),
that = this,
timer = setInterval(function () {
countdown.text(--seconds);
if (seconds === 0) {
clearInterval(timer);
that._echoClose();
}
}, 1000);
},
_echoDestroy: function () {
$('.echoSoc_wrap').fadeOut(500);
},
_echoClose: function () {
this._echoDestroy();
if (this.options.reopen_task) {
var that = this;
setTimeout(function () {
$('.echoSoc_wrap').fadeIn(500);
that._echoTimeout();
that._echoCenter();
}, this.options.reopen_time * 1000);
}
},
_echoCenter: function () {
function reposition () {
var str_wrap = $('.echoSoc_wrap'),
str_frame = $('.echoSoc_frame');
str_frame.css({
top: Math.round(
str_wrap.height() / 2 -
str_frame.outerHeight() / 2 -
parseInt(str_frame.css('margin-top'), 10)
),
left: Math.round(
str_wrap.width() / 2 -
str_frame.outerWidth() / 2 -
parseInt(str_frame.css('margin-left'), 10)
)
});
}
if ( $('.echoSoc_wrap').length ) {
reposition();
$(window).on('resize', function () {
reposition();
});
}
},
_echoAsync: function () {
if (this.options.twitter_button) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js', function () {
twttr.ready(function (twttr) {
twttr.events.bind("tweet", twitterCB);
});
});
}
}
if (this.options.facebook_button) {
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
} else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
}
if (this.options.google_button) {
if (typeof (gapi) != 'undefined') {
$(".g-plusone").each(function () {
gapi.plusone.render($(this).get(0));
});
} else {
$.getScript('https://apis.google.com/js/plusone.js');
}
}
},
_echoEvents: function () {
var cookie_sum = parseInt(this.options.cookie_expire, 10);
window.fbAsyncInit = function () {
FB.Event.subscribe('edge.create', function(response) {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
});
};
googleCB = function() {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
twitterCB = function () {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new EchoSoc(this, options));
}
});
};
})(jQuery, window, document);
my html is only :
<a href="" onclick="echoSoc()" class="box_single_ability">
And this js is also included in index.html file
<script>
$(document).echoSoc({
title : '<h3>title</h3>',
facebook_button : true,
facebook_url : 'https://www.facebook.com/',
twitter_button : true,
twitter_url : 'twitterurl/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'googleurl/',
timeout : 2,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 1,
cookie_expire : 30,
close : false
});
</script>
It has to do with when this.echoTrigger(); is being called. So, either remove that from init (not sure if that's the behaviour you want), or don't do your initialization step (the html snippet you posted) until a click happens. Currently init is being called
I am developer of this one and I know it's not built to function this way. However you can accomplish that by removing plugin call from your page(s) and move it within click event of desired button as triggerer.
HTML
<button type="button" id="echoSoc-trigger">Trigger Plugin</button>
jQuery
$('#echoSoc-trigger').on('click', function () {
$(document).echoSoc({
title : '<h3>CPA Elites - Viral Plugin</h3>',
facebook_button : true,
facebook_url : 'http://dvL-den.net/',
twitter_button : true,
twitter_url : 'http://dvL-den.net/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'http://dvL-den.net/',
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
});
});
This way it will work fine and it will call the plugin only when you click specified button, obviously.
So, IE is giving me issues, surprise, surprise...
I create a jquery dialog box (Div3) and then inside div3, i display a table (Div4). This works fine in firefox. However, in IE it is not displaying div 3, the popup window. Instead it returns the error "Unspecified error," and only displays div4, the table. Code is below...
I believe the error is somewhere in the else statement.
Any help is appreciated. Thanks!
function displayMid(count) {
var x = $("#Pid"+count).text();
var y = $("#PidSeries"+count).text();
//alert(x);
if (x == 0) {
return;
}
else if (y == null || y == " " || y == "") {
$("#inputDiv3").html("").dialog('destroy');
$("#inputDiv3").dialog({
title: 'You must add the Product before you can assign catalogs!!!',
width: 500,
modal: true,
resizable: false,
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
}
else {
$("#inputDiv3").dialog('destroy');
$("#inputDiv3").html('<div style="height:300px;overflow-y:scroll;"><div id="inputDiv4"></div></div>').dialog({
title: 'Catalog for ' + $("#PidTitle"+count).text(),
width: 500,
modal: true,
resizable: false,
open: $.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
}),
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
}
}
Not sure about this but I think you should wrap the ajax call for open: in a anonymous function.
open: function(){
$.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
});
},
Usually IE specifies a line number for the error. You have a lot going on in there, try breaking down each part into its own statement on a separate line. You can then throw in console logs between each line as well.
In general I like to create a new variable and assign that to the property, or create a new local function if the property is a function.
The issue seems to be in your open function. Maybe try wrapping that in an anonymous function like so:
$("#inputDiv3").html('<div style="height:300px;overflow-y:scroll;"><div id="inputDiv4"></div></div>').dialog({
title: 'Catalog for ' + $("#PidTitle"+count).text(),
width: 500,
modal: true,
resizable: false,
open: function() {
$.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
});
},
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
Otherwise, the "get" will fire immediately as opposed to when you actually open the dialog.
So I'm using fancybox to load up a login iframe, and I would like it onComplete to bring focus to the username field. If someone could take a look at this code and let me know what's wrong, that'd be great.
Gracias.
/* Function to resize the height of the fancybox window */
(function($){ $.fn.resize = function(width, height) {
if (!width || (width == "inherit")) inner_width = parent.$("#fancybox-inner").width();
if (!height || (height == "inherit")) inner_height = parent.$("#fancybox-inner").height();
inner_width = width;
outer_width = (inner_width + 14);
inner_height = height;
outer_height = (inner_height + 14);
parent.$("#fancybox-inner").css({'width':inner_width, 'height':inner_height});
parent.$("#fancybox-outer").css({'width':outer_width, 'height':outer_height});
}
})(jQuery);
$(document).ready(function(){
var pasturl = parent.location.href;
$("a.iframe#register").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 350,
'width' : 450,
'height' : 385,
'scrolling' : 'no',
'autoScale' : false,
'autoDimensions' : false,
'overlayShow' : true,
'overlayOpacity' : 0.7,
'padding' : 7,
'hideOnContentClick': false,
'titleShow' : false,
'onStart' : function() {
$.fn.resize(450,385);
},
'onComplete' : function() {
$("#realname").focus();
},
'onClosed' : function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
}
});
$("a.iframe#login").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 350,
'width' : 400,
'height' : 250,
'scrolling' : 'no',
'autoScale' : false,
'overlayShow' : true,
'overlayOpacity' : 0.7,
'padding' : 7,
'hideOnContentClick': false,
'titleShow' : false,
'onStart' : function() {
$.fn.resize(400,250);
},
'onComplete' : function() {
$("#login_username").focus();
},
'onClosed' : function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
}
});
$("#register").click(function() {
$("#login_form").hide();
$(".registertext").hide();
$.fn.resize(450,385);
$("label").addClass("#register_form label");
});
$("#login").click(function() {
$.fn.resize(400,250);
$("label").addClass("#login_form label");
});
$("#register_form").bind("submit", function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
if ($("#realname").val().length < 1 || $("#password").val().length < 1 || $("#username").val().length < 1) {
$("#no_fields").addClass("warningmsg").show().resize(inherit,405);
return false;
}
if ($("#password").val() != $("#password2").val()) {
$("#no_pass_match").addClass("errormsg").show().resize();
return false;
}
$.fancybox.showActivity();
$.post(
"../../submit.php",
{ realname:$('#realname').val(),
email:$('#email').val(),
username:$('#username').val(),
password:MD5($('#password').val()),
rand:Math.random() }
,function(data){
if(data == "OK"){
$(".registerbox").hide();
$.fancybox.hideActivity();
$.fn.resize(inherit,300);
$("#successful_login").addClass("successfulmsg").show();
}
else if(data == "user_taken"){
$.fancybox.hideActivity();
$("#user_taken").addClass("errormsg").show().resize(inherit,405);
$("#username").val("");
}
else {
$.fancybox.hideActivity();
document.write("Well, that was weird. Give me a shout at webmaster#criticalwire.com.");
}
return false;
});
return false;
});
$("#login_form").bind("submit", function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
if ($("#login_username").val().length < 1 || $("#login_password").val().length < 1) {
$("#no_fields").addClass("warningmsg").show().resize(inherit,280);
return false;
}
$.fancybox.showActivity();
$.post(
"../../admin/users/login_submit.php",
{ username:$('#login_username').val(),
password:MD5($('#login_password').val()),
rand:Math.random() }
,function(data){
if(data == "authenticated"){
$(".loginbox").hide();
$(".registertext").hide();
$.fancybox.hideActivity();
$("#successful_login").addClass("successfulmsg").show();
parent.document.location.href=pasturl;
}
else if(data == "no_user"){
$.fancybox.hideActivity();
$("#no_user").addClass("errormsg").show().resize();
$("#login_username").val("");
$("#login_password").val("");
}
else if(data == "wrong_password"){
$.fancybox.hideActivity();
$("#wrong_password").addClass("warningmsg").show().resize();
$("#login_password").val("");
}
else {
$.fancybox.hideActivity();
document.write("Well, that was weird.");
}
return false;
});
return false;
});
});
And here is the HTML:
<p><a class="iframe" id="login" href="/login/">Login</a></p>
You can try:
$('#fancybox-frame').contents().find('#login_username').focus();
in your onComplete, or simply add a $('#login_username').focus(); in a $(document).ready(); of your actual login page.
If you're not using an iframe then these may not work for you. We set up our fancybox to target a div which is contained within a hidden div on the page.
Calling focus() on a hidden element on $(document).ready() doesn't work. Binding to the fancybox onComplete event didn't work because the event was fired on page load, rather than when the fancybox was actually shown.
In the end what worked for us was binding to the mouseleave event of the fancybox anchor. So something like:
$(document).ready(function () {
$('#LoginLink').mouseleave(function () {
$('#UserName').focus();
});
});