We Keep Coding

Jquery plugin make it bind onclick

I have a jquery plugin which i have purchased from code canyon for social sharing.
I have it configured for single item sharing, however I wish to make it connected to multiple instances on a page.
<script>
$('a.shareplus').shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/' + $(this).attr('data-href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
</script>
This works perfectly for a single item that is shared on a webpage. Ive searched the documentation for this plugin, however I cant find any reference for it to be attached to multiple items on a single page.
What Im wondering is.. Im thinking about using the .bind() method to connect to it on click and using the data-href custom attribute to define the page for it to be connected to.
But this doesnt seem to work.
<script>
$('a.shareplus').bind('click',shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/' + $(this).attr('data-href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
})</script>
Im not too sure on how to connect the bind api to links that contain functions that have parameters so any help greatly appreciated

Try to write your code in document.ready() and use on() instead of bind() also use data() for data attributes like,
$(function(){
$('a.shareplus').on('click',function(){
$(this).shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/'+$(this).data('href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
});
});

Fancybox overflow is hidden

I am using fancybox 2 and am appending html content to the modal. I turned of scrolling, and now the content that overflows the modal is hidden. Is this a problem with the max-height of the modal? How do I fix this?
My Code:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});

You have multiple possible reasons this is breaking.
We need more info for a definitive answer, but here are some likely/possible reasons.
Try a few of these parameters:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'height' : 1000, <--- Try these one at a time
'autoHeight' : true, <--- Try these one at a time
'autoResize' : true, <--- Try these one at a time
'fitToView' : true, <--- Try these one at a time
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You can read the full plugin options documented here:
http://fancyapps.com/fancybox/#docs

Fancybox YOutube Video Keeps Playing

Not sure what the catch is but in FF the video keeps playing. All other browsers close when you click outside of fancybox... the embeded Youtube Video will stop playing as well. Firefox seems to ignore this. What am I doing wrong?
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
});
});
$("#fancy_content").empty();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0,
opacity: 0.3,
css: {'background-color': '#cdc3b7'}
}
}
});
});

You don't have to initialize the same .fancybox selector twice. In other words, you don't have to do :
$(".fancybox").fancybox({
// options
});
... and later :
$(".fancybox").fancybox();
#fancy_content is not a valid fancybox selector (at least not for v2.x)
$("#fancy_content").empty(); is outside of the .ready() method. Anyway is useless as explained above.
callbackOnClose is not a valid API option (use afterClose instead if needed)
This script works perfectly fine cross-browser :
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
/*
// yo don't need this
,
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
*/
});
... as you can see in this JSFIDDLE. Make sure you test it with FF (works fine with my FF v17.0.1)

How to stop Uploadify from displaying progress box

Just as the title says, I can't seem to get Uploadify to stop displaying the progress box during upload. Here is what I have:
$('#imageupload').uploadify({
'swf' : 'scripts/uploadify/uploadify.swf',
'uploader' : 'scripts/uploadify/uploadify.php',
// Put your options here
'buttonText' : 'Select Image',
'uploadLimit' : 999,
'overrideEvents' : ['onUploadProgress'],
'multi' : false,
'formData' : {'yourid' : '<?=#(int)$_SESSION['user']?>'},
'fileSizeLimit' : '2MB',
'fileTypeExts' : '*.gif; *.jpg; *.png; *.JPG; *jpeg',
'fileTypeDesc' : 'Image Files',
'onUploadStart' : function(file) {
$("#imageupload").uploadify("settings", "formData", {'yourid' : $(".userid").attr("id")});
$(".imageuploadbox #imagepercent").css("display", "inline");
},
'onUploadSuccess' : function(file) {
var currenttime = new Date();
$("img#yourprofilepic").attr("src", "images/artist_pictures/thumbs/artist_8.jpg?"+currenttime);
},
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
var percentcomp = (100*(totalBytesTotal/totalBytesUploaded)).toFixed(0);
$('.imageuploadbox #imagepercent #percentcomplete').html(percentcomp);
}
});

It's simple try this:
Remove link to uploadify css and then add this in your css:
.uploadifyQueue
{
display:none;
}

It seems like the names have changed, this one worked for me:
#upload_pc-queue{
display:none;
}

Can't focus fancybox iframe input

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();
});
});