Using Tableau Server 9.2. I am playing with the Javascript API to embed vizs in web pages. It works nicely except I want to hide the top part of the viz page, everything including and above the navigation breadcrumb part. The part circle in red is what I want to remove from the embedded viz. What options can be used to hide this part of the embedded viz?
Here is my html and js code to embed the viz.
<script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
<div id="tableauViz"></div>
<script>
var placeholderDiv = document.getElementById("tableauViz");
var url = "https://tableau.byu.edu/#/site/DCE/views/Tableauworkbooksanddatasources/UnpublishedWorkbooks?:embed=y";
var options = {
hideTabs: true,
width: "800px",
height: "700px",
hideToolbar: true,
onFirstInteractive: function() {
// The viz is now ready and can be safely used.
}
};
var viz = new tableau.Viz(placeholderDiv, url, options);
</script>
For var url
Replace the current link with the link that is inside under share button .
Do not use the link under Embed , rather use the one below Email.
share button can be found when you open your viz. inside tableau .
Let me know if this works .
Related
I am unable to get the TinyMCE file_browser_callback property to work, so that the Image dialog shows a browse button.
I downloaded TinyMCE 5.08 from tiny.cloud (prod version). I insert the library, then call init() below. I added a file_browser_callback property with a callback function, which is supposed to open a modal window, from where I pick up a file from a media library and insert it back.
For reasons I cannot understand I cannot make the browse button, in the image dialog, visible.
<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script>
$(function() {
tinymce.init({
height: 500,
selector: 'textarea.wysiwyg',
plugins: ['image'],
branding: false,
convert_urls: false,
file_browser_callback: function(field_name, url, type, win) {
$('#file-modal').modal({
duration: 200,
onApprove: function () {
if ($('#file-modal .file.selected').length) {
let $file = $('#file-modal .file.selected');
win.document.getElementById(field_name).value = $file.data('path');
}
}
}).modal('show');
}
});
});
</script>
The browse button should appear when the callback exists. I've tried implementing the callback as a separate function and passingit as a string with no luck. There are no error messages visible in the console.
I also tried 5.07 with no luck. I have this working on a separate application
The API you are using is a TinyMCE 4 API. Per the migration documentation, in TinyMCE 5 you need to use file_picker_callback instead:
https://www.tiny.cloud/docs/migration-from-4x/#file_browser_callbackfile_picker_callback
https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback
Well, it appears TinyMCE dropped the support for file_browser_callback from their 5.x versions. Propably because they offer file hosting cloud services themselves now and it might be a premium plugin. What a fantastic solution. I'll fall back to using 4.9.4 prod version.
I have a page with users' photos. Each photo is in a card. I would like to allow users to share each picture separately.
This is my html:
<div class="sharethis-inline-share-buttons" data-url="http://{{recent.photo.url}}" data-title="Check out this picture by {{uploaded_by}}"></div>
But it only shares the base website (http://myexample/photopage/)
I see I could also use <span> or Javascript, but it doesn't look like that allows for sharing different links within a page.
You need to change the data-url property dynamically with javascript:
const buttons = document.querySelector('.sharethis-inline-share-buttons')
buttons.setAttribute('data-url', `http://${recent.photo.url}`)
buttons.setAttribute('data-title', `Check out this picture by ${uploaded_by}`)
For the record, I'll add the link to sharethis' page, where the customization options are listed: https://www.sharethis.com/support/customization/customize-share-urls/
Although this is too late, but you can change sharethis properties including title, url, description etc like this-
// render the html
<div id="my-inline-buttons"></div>
var config = {
url: 'YOUR_URL_HERE',
title: 'YOUR_TITLE_HERE',
description: 'A_LONG_DESCRIPTIN_OF_YOUR_CHOICE',
image: 'https://YOUR_IMAGE_URL',
};
// load the buttons
window.__sharethis__.load('inline-share-buttons', config);
You can find more in this link of Custom ShareThis.
I would like to display a facebook-like button within the Fancybox popup.
The interaction I'm imagining is similar to how Pinterest displays the social sharing buttons to the right of a modal popup (e.g. http://pinterest.com/pin/73465037641354472/). Each image has a unique url so that you can link to the content of the popup directly.
How can I:
Ensure that each image within my Fancybox gallery is attached to a unique URL
Display a Like button in the popup linked to that unique URL
For #1, I found the following code discussed in the following page: this.id inside of fancybox
$("a.fancybox").each(function() {
var element = this;
$(this).fancybox({
'titleFormat' : function() {
var astring = '<span>' + element.id + '</span>';
return astring;
}
});
});
Is this the code that I need? If so, what do I do in the HTML in order for this JavaScript to work properly?
Thanks so much for any help!
You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.
Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.
EDIT
Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags.
http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3
Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.
See http://ogp.me for how to specify og tags.
I'm using fancybox with ajax request to open multilpe fancybox instances on same page:
This is html code:
User
and this is Javascript i've used:
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button_fancy").click(function(){
var element = $(this);
var Ide = element.attr("id");
$("#"+Ide).fancybox();
return false;});});
</script>
Everything could be ok, just 1 problem... first time i load the page, i need to click 2 times over "User" to open fancybox...
If i open fancybox and then i close it, the second time i can click just 1 time...
why?
Thanks
The first click registers the event to the DOM, and the second (and subsequent ones) show the Fancybox.
If using multiple Fancyboxes, you should avoid using ID's like you have there and change it to classes. Not sure why you've got all that code to launch the fancybox, when this should work:
$(".comment_button_fancy").fancybox();
This will Fancybox all elements with the class "comment_button_fancy" and should fix your two-clicks issue. You don't need to put a 'click' event handler around the Fancybox code, as it inherently has that event attached to it.
I am trying to use the sharethis button on a page which is loaded via ajax.
The buttons do not show up. Please help.
Regards,
Pankaj
After adding the new content to the dom, call
stButtons.locateElements();
// or if you want to be a bit defensive about whether the lib has been
// loaded or not:
if (window.stButtons){stButtons.locateElements();} // Parse ShareThis markup
Article another another
Updated 09/2017 Answer
The stButtons object doesn't exist anymore, now you can use
window.__sharethis__.initialize()
To reinitialize the buttons
Updated 03/2020 Answer
As found in The Ape's answer above: https://stackoverflow.com/a/45958039/1172189
window.__sharethis__.initialize()
This still works, however there is a catch if your URL changes on the AJAX request, you need to make sure the URL you want shared is set as a data attribute (data-url) on the inline sharing div. You can also update the title using data-title attribute.
<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>
Use case:
I'm using a WordPress/PHP function to generate specific content based on a query string. If you don't set the data-url attribute on the ShareThis div, ShareThis will hold the first URL that was clicked to share, regardless of the URL update on AJAX request.
This solution will also work for NodeJS based frameworks, like Meteor.
stButtons.locateElements();
is needed in the rendered callback of a template, to ensure that the shareThis buttons will appear on a page redirect.
I was facing the same problem with sharethis and Ajax pagination.
The buttons was not showing after posts loaded by Ajax so I've searched and found this.
I've just added the function stButtons.locateElements(); on Ajax success:
something like success: stButtons.locateElements();
Hope this will be helpful for someone like me.
Thanks
Ibnul
For the new API following solution worked for me
if (__sharethis__ && __sharethis__.config) {
__sharethis__.init(__sharethis__.config);
}
Add this code after loading ajax content.
do this:
window.__sharethis__.load('inline-share-buttons', config);
and config your buttons with javascript.
The following should work with current ShareThis javascript. If sharethis js isn't loaded, the script loads it. If it is already loaded, ShareThis is re-initialized using the current URL so that it works on pages loaded via Ajax. Working fine for me when used with mounted method on Vue component.
const st = window.__sharethis__
if (!st) {
const script = document.createElement('script')
script.src =
'https://platform-api.sharethis.com/js/sharethis.js#property=<your_property_id>&product=sop'
document.body.appendChild(script)
} else if (typeof st.initialize === 'function') {
st.href = window.location.href
st.initialize()
}
Make sure you use your property id provided by ShareThis in the script src url.
In Drupal you can achieve this by adding following code:
(function($){
Drupal.behaviors.osShareThis = {
attach: function(context, settings) {
stLight.options({
publisher: settings.publisherId
});
// In case we're being attached after new content was placed via Ajax,
// force ShareThis to create the new buttons.
stButtons.locateElements();
}
};
});
I found the following solution on one of the addThis forums and it worked great for me.
I called the function as a callback to my ajax call. Hoep this helps
<script type="text/javascript">
function ReinitializeAddThis(){
if (window.addthis){
window.addthis.ost = 0;
window.addthis.ready();
}
}
...
$('#camps-slide .results').load(loc+suffix, function() {ReinitializeAddThis();});
</script>