AddThis in AJAX - javascript

I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>

Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');

var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.

method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.

You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>

Related

Fix jQuery code problem or convert jQuery to JavaScript

I am working with prestashop 1.7.I wrote jQuery code that affect on the category page. And I put it in the file path below:
public_html/themes/panda/assets/js/theme.js
But it will work only after refresh page. Is the code wrong? Is the file path wrong? Or should I introduce this jQuery code? Should I convert jQuery to Javascript? If so, how? Thanks
$(document).ready(function() {
$(".hover_fly .hover_fly_btn").mouseover(function() {
$(this).parents('.pro_first_box').find('#overlayToOpen').css('display', 'block');
});
$(".hover_fly .hover_fly_btn").mouseout(function() {
$(this).parents('.pro_first_box').find('#overlayToOpen').css('display', 'none');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="pro_first_box">
<div id="overlayToOpen">every things</div>
<img src=" ">
<div class="hover_fly ">
<a class="hover_fly_btn " href="# ">
<div class="hover_fly_btn_inner "><span>More info</span></div>
</a>
</div>
</div>
Make sure that the target element of your script exists in your page. In your case it is the element that has a class "hover_fly hover_fly_btn". If you are sure that the target element exists, add console.log() to your function to help you debug the problem and to make sure that the code was executed.

jQuery access DOM on https - mixed-content security

Html:
<section id="playing" class="gradient">
<div id="playing-header"> … </div>
<div id="playing-carousel"> … </div>
<div id="playing-info">
<a id="radio-star" class="" href="radio:star"></a>
<div id="radio-track-info">
<h2 id="radio-track"> … </h2>
<h2 id="radio-artist">
<a class="outgoing">
JAY Z
</a>
</h2>
</div>
<div id="thumb-container"> … </div>
</div>
<div id="loading" style="display: none;"></div>
<div id="loading-throbber" style="display: none;"></div>
<div id="station-error" style="visibility: hidden;"> … </div>
jQuery:
alert($('#radio-artist .outgoing').text());
jsfiddle:
http://jsfiddle.net/CT95N/
Works on jsfiddle, but not on website. returns empty. what could be the problem? what could i check to call my jquery after dom?
thanks
Edit:
$(document).ready(function() { }; is of course already called in the start, so that is not the point.
The problem is that FIREFOX is blocking the content, since I am working on https website and trying to get some data from that site. Since the site doesn't use jQuery I had to append it by myself which means that I am adding http content inside of https website. I think this happens because I am adding jquery external source(appending) from google via greasemonkey script.
This is the warning:
http://i.imgur.com/oV19dFz.png
Can I somehow do this in better way?
The most likely answer is that the document isn't ready yet, you should wait til the doc is loaded:
$(document).ready(function() {
alert($('#radio-artist .outgoing').text());
});
"what could i check to call my jquery after dom?"
I assume that means you haven't wrapped this alert with anything. You most likely need to ensure that the function is only called once the document/DOM is ready and rendered. jsfiddle works because they most likely add this wrapping for brevity in your source snippets.
$(document).ready(function() {
alert(....);
});
Ok figured it out. When you work with https you have to append jQuery CDN from hTTPS instead of HTTP:
function appendjQuery(){
var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
document.body.appendChild(script);
document.body.removeChild(script);
}
Cheers.
try this code
$(document).ready(function(){
alert($('#radio-artist .outgoing').text());
});
According to this code the jQuery will called when the DOM is ready.

Delay execution of addThis

I have a website that uses google maps plus my own javascript. I am using the addThis javascript for social buttons. The site isnt really usable until my javascript plus the google javascript loads and runs (on $(document).ready...) so I want to minimise delay in getting things going. So I was looking at postponing the AddThis module until everything else has finished as its not that important.
Other question on stackoverflow suggest placing the link to the javascript that I want to delay at the bottom of the page. But am i right in thinking this is not relevant to me as $(document).ready... will not fire until all linked javascript has loaded no matter where its placed?
If so, should I somehow load in the addThis javascript after on $(document).ready... ?
Though I'd really prefer not to run addThis until all google maps images etc are all loaded (I believe .ready() does not wait for this). Is there a recomended way to handle this kind of thing?
For reference, typical addThis usage...
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":false,
"ui_click":true,
"data_use_cookies": false
};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#"></script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>
I came up with this (please let me know if there is a better way).
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":false,
"ui_click":true,
"data_use_cookies": false
};
$(window).on("load", function(){
$('head')
.append($('<script>')
.attr('type', 'text/javascript')
.attr('src', "http://s7.addthis.com/js/250/addthis_widget.js#"));
});
</script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>
Take a look at loading AddThis asynchronously:
http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance#.UZFNACtAR7Q
At the very least, this will minimize load times (but luckily AddThis is already cached on most computers, so there's really very little load time).
Just in case somebody is still looking for solution. AddThis has already released that many people are annoyed by page delays and they now offer several options which you can control in your script to load when you (dom) are ready:
Although you can also use dynamic loading or appending #async=1 to load asynchronously, I think the other good option is just put in this way - which will not run until dom is ready:
<script type="text/javascript">
/*
//if you have a pub_id, add it here and uncomment these two lines
var addthis_config = addthis_config||{};
addthis_config.pubid = 'YOUR PUBID';
*/
var addthisScript = document.createElement('script');
addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript)
</script>
You can read more here

window.location not work properly

Hi all I am navigating from one html page to another as:
window.location = "test.html";
In test.html I have header as:
<script type="application/javascript">
function redirect()
{
alert("inside redirect:");
//window.location = url;
//history.back();
history.go(-1);
return false;
}
</script>
<div data-role="navbar">
<ul>
<li> Go Back</li>
<li> <a onclick="redirect()" data-icon="back" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Back1</a></li>
</ul>
</div>
But here both back buttons (Go Back and Back1) are not working. If I use $.mobile.changePage('test.html') to navigate between pages then both Back buttons work. Why they are not with windows.location?
I want to develop this application for B-Grade browser which are not support ajax. Therefore I cant use $.mobile.changePage('test.html').
Any help will be appreciated. Thanks.
This Blackberry OS 5 browser has lots of issue. Initially i also tried to do what you are doing right now. But later i think so you will have to think of some other approach which is better. Here is how i solved it
First of all add these lines before loading the jquery-mobile script like this
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
Then i used the Single Html concept. In this concept i had to load my script just once and i could make use of jquery-mobile's changePage. When i had many html pages then i has to wait for some seconds as loading and unloading of scripts took place. Avoid that, Its unnecessarry.
Have all the pages with in the same Html like this
<div data-role="page" id="page1">
<div data-role="page" id="page2">
.
.
.
Then after that you can easily do a changePage like this
$.mobile.changePage("#page1", {
transition : "slide"
});
I hope you take the right approach.
Why not use window.location.replace("test.html");
try:
window.location.href = "test.html";
OR:
window.location.assign("test.html");
SEE REFERENCE
In jQuery mobile you can turn of ajax by setting some initiation variables. You need to load this script before you load jQuery mobile
$(document).bind("mobileinit", function(){
//apply overrides here
$.mobile.ajaxEnabled = false;
});
With ajax turned off you can now still use your $.mobile.changePage().
Now to create a back button all you have to do is give the link an attribute of data-rel="back"
<li>Go Back</li>

FancyBox returning "The requested content cannot be loaded. Please try again later." with link

I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.
The FancyBox javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
And applies to the following clip of HTML:
<li class="fancybox-outer">
<a id="inline" href="#hover-image_0" class="fancybox">
<img src="http://website.com/file/id:63" style="margin-top: 32px" />
</a>
<p>1G2A</p>
<div style="display: none;"><div id="hover-image_0"><img src="http://website.com/file/id:64/ext:.png" class="img" /></div></div>
</li>
<li class="fancybox-outer">
<a id="inline" href="#hover-image_1" class="fancybox">
<img src="http://website.com/file/id:60" style="margin-top: 32px" />
</a>
<p>17</p>
<div style="display: none;"><div id="hover-image_1"><img src="http://website.com/file/id:61/ext:.png" class="img" /></div></div>
</li>
Does anyone see what might be causing the issue or what I need to correct?
Thanks!
Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.
I still need help with this issue. Anyone have any ideas?
Thanks!
Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!
Your approach has many issues:
First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link
<a class="fancybox" href="{target}" ...
should be bound to fancybox via the following script in order to work
$('.fancybox').fancybox();
Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ... is not bound to fancybox.
The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)
Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.
Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here
Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:
1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script
$('.fancyframe').fancybox({
'type':'iframe',
'width': 600, //or whatever you want
'height': 300
});
2: within your hidden inline content set that class to the link, so this code:
<div style="display: none;">
<div id="hover-image_0">
<img src="1_b.jpg" class="img" />
</div>
</div>
now should look like
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)
SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.
I think I've figured out what's causing this issue, at least for me.
The problem seems to occur when you've got a class on one of your elements that is the same as the popup class.
For instance:
<a class="popup" href="#">Open the popup</a>
And you have something in your popup with the same class name, for instance:
<div class="popup">some text</div>
You'll get the error. Try changing the div class to something like popup-window - that should fix your error
In your example page, it works for me if I don't click. When you click, what page are you supposed to be taken to? Do you want it to just go to the next image?
In my personal preference, I don't care for the activation on hover. It gets really confusing, especially when most people go to instinctually click on an image. But in your case it opens on hover, then they click instinctually, then you get the error.
Do you get this same error when you're just using the functionality as it normally applies?
If you want, try to give each image a gallery name instance like so: rel="gallery" and see what happens. You should get the next/prev arrows showing up and working like you would expect.
But honestly, I would get rid of the hover functionality altogether. Or at least get rid of the mouseout() That's probably the most bothersome part.
Just use this to call the fancybox actions:
$("a[rel=gallery]").fancybox();
That way you can get rid of all of those classes that are probably causing the issues.
I hope that helps.
I just ran into this issue as well.
As it turns out, the href url is EXTRA case sensitive. (if that is possible)
Regardless double, triple check your href urls to insure that you have the case exactly correct.
my solution was:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'titleShow' : false,
'showCloseButton': true,
'titlePosition' : 'inside',
'transitionOut' : 'none',
'title' : '',
'width' : 640,
'height' : 385,
'href' : this.href,
'type' : 'iframe',
'helpers' : {
'overlay' : {'closeClick': false}
}
});
return false;
});
});
</script>
If some of the images are showing and others are not, even though the markup is identical, then check this:
Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!
I just re-created your test on my local machine and it works fine for me (I ran this from the demo folder of the FancyBox install) :
<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox().hover(function () {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave(function () {
$("#fancybox-overlay").click();
});
});
</script>
<li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
<img src="1_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Yahoo</p>
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com">
<img src="1_b.jpg" class="img" />
</a>
</div>
</div>
</li>
<li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
<img src="2_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Google</p>
<div style="display: none;">
<div id="hover-image_1">
<a href="http://www.google.com">
<img src="2_b.jpg" class="img" /></a></div>
</div>
</li>
</body>
</html>
I having the same problem with Fancybox. You cannot have spaces or special character in href and div id. Use an URL slug if you are using page titles.
I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as #BrettBumeter mentioned.
In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be).
Altering this solved my issue.
Don't apply the fancybox class to your LI element, do it to your A element.
I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)
Hope this helps.
My problem was giving inappropriate path to image e.g;
<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>
While the images loaded well locally, It could not do online.
Correcting the path solved the problem.
<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
If you are trying to make Fancybox work with dynamic content, you may check this.
I was using the following code:
<a class="video__overlay" data-fancybox="gallery" href="<?= $blog_url ?>"></a>
My issue was that I was generating $blog_url dynamically, looking at a specific text file line, so a \n was being added at the end of $blog_url, without me noticing this.
So, I used trim() and everything works as expected.

Categories