Earlier I used Sharrre just for one button set per page and it worked just fine. However, I had to change that and now I have 4 sets of buttons and the data-text and data-url values are not showing in the facebook popup - instead it loads the text from the actual linked page which wouldn't bother me so much if it wouldn't come from a hidden form showing "Contact usNameEmail.." etc. It works with twitter and shows first the data-text value and then data-url, just like it should.
I'm using a system almost like the Sharrre example 2 (http://sharrre.com/example2.html) and my codes are now:
HTML
<div class="share-buttons" data-url="MY URL" data-text="MY TEXT"></div>
and the jQuery
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
template: '<div class="share-icon-holder"><img src="fb.png" /><img src="twitter.png" /></div><div class="share-text"><img src="share.png" /></div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
So there's 4 times that html part on my page and I added the .each function trying to solve this but it didn't have any effect. Any hints or advices to solve this?
Here's a fiddle of the problem: http://jsfiddle.net/b54sc/
I found out a solutions for this myself. But if there's any other ideas please share them! Thanks to #CBroe for pointing to the right direction.
Best practice would be using Open Graph meta tags but that's not possible for me because my site is one-page-site so all the content is on the same page. And since meta tags need to be in the HEAD of the html this won't suit me because I'd need four different urls and titles.
But while browsing for the meta tags solution I found another fairly easy solution.
So, Sharrre uses Facebook's sharer.php which is already deprecated. Thou it's deprecated it's still available to use and it's quite common because it doesn't require app_id. But it has changed: it doesn't accept the 't' parameter in the url for the title so that's the reason why my data-text wasn't working. And there's a solution.
This is the page I found:
http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
Changing the url a little bit does the thing. The title part needs to be 'p[title]' instead of just 't'. And there's also other parameters to use.
THE FIX to Sharrre
Sharrre uses the old method which doesn't work anymore and I just changed the popup creation function in the sharrre.js file on line 325.
From
window.open("http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&t="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
To
window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&p[title]="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
I don't know how long this solution works because Facebook can change it again anytime but it'll do for now!
Another way would be usign a Facebook dialog but that needs the app_id.
try this: I have added title, url in your code
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
title: $(this).attr('data-href'),
url: $(this).attr('data-url'),
template: '<div class="share-icon-holder"><img src="fb.png" /><img src="twitter.png" /></div><div class="share-text"><img src="share.png" /></div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
Related
I need to use Avairy (from Adobe Creative SDK, Web version) inside my own custom dialog.
Is there any way to get Avairy's div instead of the dialog? I will place it inside my own dialog.
The main problem is the method avairyEditor.launch() opens a dialog and I do not see simple way to do something else.
Is there the only way to do it writing my own hacks (invisible showing the dialog and cutting div from it) or I can do it shedding hardly any blood?
Yes, you need to use the appendTo option in the configuration.
Your HTML:
<!-- Aviary div container. You can use absolute/relative positioning -->
<div id='aviary' style='width:600px;height:400px;'></div>
<!-- Add an edit button, passing the HTML id of the image
and the public URL to the image -->
<a href="#" onclick="return launchEditor('editableimage1',
'http://example.com/public/images/goat.jpg');">Edit!</a>
<!-- original line of HTML here: -->
<img id="editableimage1" src="http://example.com/public/images/goat.jpg"/>
Your JavaScript:
var featherEditor = new Aviary.Feather({
apiKey: '1234567',
appendTo: 'aviary'
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
Documentation:
https://creativesdk.adobe.com/docs/web/#/articles/gettingstarted/index.html#constructor-config-appendTo
To get closer to what you are trying to do, consider using the appendTo property, as mentioned by Juangui, in addition to the following properties:
theme: 'minimum',
noCloseButton: 'true'
After that you can add some custom styling to better match the rest of your app.
http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text
jQuery UI 1.10 made it so that the dialog title can only be text (no html) to prevent scripting vulnerabilities. I'm not allowing user input to generate this title, so I would still like to use HTML, mainly to display an icon to the left of the title.
I'm going to post my solution to this problem because I haven't seen anyone else ask or answer this yet. Hopefully it will help someone else, or someone else may have a better approach.
More info as to why they did it: http://bugs.jqueryui.com/ticket/6016
This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML.
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title ) {
title.html(" ");
} else {
title.html(this.options.title);
}
}
}));
If you hesitate to override jQuery's _title method, you can use the html, append, or similar methods on the title element at the jQuery dialog's open event, like so:
$("#element").dialog({
open: function() {
$(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
}
});
The above parses the HTML correctly while bypassing jQuery's title method. And since it happens at the open event, the user experience remains seamless. Just did this on a project, and it worked beautifully.
This will modify the title after init the dialog
$('#element').dialog(options);
var dialogTitle = $('#element').closest('.ui-dialog').find('.ui-dialog-title');
dialogTitle.html('<strong>hello world</strong>');
I have an HTML form loaded in via ajax to a lightbox.
You can see the behaviour on the homepage of http://www.powerbuy.com.au/
In the bottom right of the page there is a Link 'Let us negotiate a deal for you' Clicking this creates a lightbox and loads the form.
The issue is that you cannot put in spaces to any of the fields, it appears to be accepting any other characters, numbers and symbols, but not spaces.
I have looked through the code for any keyCode in the JS, but I cant find anything related to spaces.
Can you replicate the issue? Can you tell me what is going on?
You can simply write below code:
$(document).ready(function(){
$("#id").keydown(function(event) {
if(event.shiftKey)
{
event.preventDefault();
}
if (event.keyCode == 32) {
event.preventDefault();
}
});
});
"id" is your textfield "id" attribute value.
Cause unknown:
Solved by converting lightbox popup from ajax load to iframe.
You can fix it by setting enableKeys : false as following:
Shadowbox.open({
title : "Nouvel Addressee",
content : $("addressee-lightbox-wrapper").innerHTML,
player : "html",
width : 920,
height : 540,
enableKeys : false,
options : {
onFinish: function() {
Event.addBehavior.reload();
}
}
});
I had similar problem. Found out, it has something with 'enableKeys' option.
There is more ways to set this option, but for some reason just this one worked for me:
Shadowbox.init({
skipsetup: true,
enableKeys: false
});
Here are some other solutions mentioned http://shadowbox.1309102.n2.nabble.com/Can-t-add-space-in-text-input-td4518072.html
I am writing a function to dynamically load jQuery UI accordian leaves with content. I know (think) the AJAX part works as I lifted it from another working AJAX loader I have, but the function as a whole does not work.
The code:
function load_leaf(link){
var link = link;
$.ajax({
cache : false,
type : 'POST',
async: false,
url : 'includes/'+ link +'.php?'+ new Date().getTime(),
dataType : 'text',
data: {
owner : '$user_id'
},
success: function(msg){
$("#" + link).html(msg);
console.log('Can\'t see me in Chrome, but ok in firefox !')
},
error: function() {
console.log($.makeArray(arguments));
},
complete: function() {
console.log($.makeArray(arguments));
}
});
};
$(function(){
$('.accordian').click(function(){
var link = this.getAttribute("link");
load_leaf(link);
});
});
For whatever reason this does not work. The break point seems to be this line
$("#" + link).html(msg);
Specifically the selector, as a hard coded selector works perfectly. The link variable is correctly filled i know this as i can alert the value correctly. The link is not the problem as i replaced the whole ajax function with a simple add class and it a still did not work, it also broke at the selector.
EDIT:
This is the div as printed by php:
<h3 class="accordian" id="'.$tab_id.'" link="'.$tab_link.'" >
'.$tab_name.'
</h3>
<div id="'.$tab_link.'"><p>Hi</p></div>
The html for the first one is:
<h3 class="accordian" id="accordian_manage.php" link="accordian_manage.php" >Manage Images</h3><div id="accordian_manage.php"><p>Hi</p></div>
Your ID has a period . in it, which jQuery interprets as a chained class selector.
You can either change your link/IDs, or use this hack:
$("[id='" + link + "']");
Live demo
I guess your problem is with Jquery is not finding the div to load the msg..Post the accordion div so that i could give you the proper selector
This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?
Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});
This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};