I've installed a Like button on my blog, as well as the Facebook send button.
When I click "Send", the popout comes out and appears nicely with a prompt on who to send the post to.
But, when you click "Like", no popout comes. It's not the "overflow:visible" problem, because the Send popout works. Very confusing and odd, I think...
This is the code I'm using:
<div style="overflow:visible;" class="fb-like" data-href="http://liamgetreu.com" data-send="true" data-width="450" data-show-faces="true" data-font="lucida grande"></div>
Any ideas? Thanks.
I checked out your blog and it looks like there is an iframe being generated for the pop-out, but that pop-out is not being filled in by Facebook. There is a javascript error that is the probably cause of the issue.
uncaught exception: Error: Permission denied for <http://www.facebook.com>
to get property Proxy.InstallTrigger
https://plus.google.com/_/apps-static/_/js/widget/gcm_ppb,
googleapis_client,plusone/rt=j/ver=VRKLmt4S1dg.en_US./sv=1
/am=!itqi7GDL5S6I4GqN1g/d=1/ Line 116
To find out what javascript is colliding with that Facebook one to cause the error. I would suggest striping everything off that page one thing at a time until the Facebook script can run without error. This will tell you what item (or combination of items) was interfering.
Happy troubleshooting! Let us know what you find.
Related
I have a FAQ page that reads a Firebase node and lists all the Q & A contents using the below lines of code:
<firebase-auth id="fbLogin" provider="anonymous" location="https://XXX.firebaseio.com"></firebase-auth>
<firebase-collection orderByPriority log id="fbFAQ" location="https://XXX.firebaseio.com/faq" data="{{faqs}}"></firebase-collection>
<template is="dom-repeat" items="[[faqs]]" as="faq">
<div class="forBorder">
<akyral-details id="[[faq.__firebaseKey__]]">
<akyral-summary>[[faq.q]]</akyral-summary>
<p class="answer">[[faq.a]]</p>
</akyral-details>
</div>
</template>
I have a link from mainpage to the FAQ page and upon click it works perfect! However when I go back to main page and then click again for FAQ link the page renders nothing. But if i refresh the page then its fine.
To recreate do the following:
Open https://sizzling-fire-7471.firebaseapp.com/ and click the FAQ page link at bottom . You will see a list of Q & A
Then click left arrow on top to go back to main page
Now click FAQ link again and you will not see anything,but in the console you will see it fetching data. Also, refreshing the page makes it okay
I bet it's a race condition. The firebase-auth and firebase-collection are firing at the same time, causing it to try to fetch the collection before it's authorized. Try wrapping firebase-collection in <template is="dom-if" if="{{fbUser}}"> so it doesn't get stamped until the auth is completed.
This issue has now been resolved. It was due to a bug in firebase-collection. It was fixed at https://github.com/GoogleWebComponents/firebase-element/pull/42/files and will soon be merged.
The problem is, the links in the main menu don't work, you can hover on them and see the address that it links to, but when you click them nothing happens.
I'm assuming it's something to do with the css.
I tried deleting all the z-index to see if it's something to do with them(in case it was behind something and you couldn't actually click them), I switched positionings around, nothing works.
Here is a link to the demo site.
http://tinyurl.com/nlmw2sg
Nevermind I found the answer. I was using this script for the sticky menu http://www.outyear.co.uk/smint and I just had to delete this line
e.preventDefault();
from it so that the page will jump to where the link points to.
It's not the CSS.
SMINT is returning this error every time you click a link:
Uncaught TypeError: Cannot read property 'top' of null
Looking at smint.js this is the line of code it is complaining about:
var goTo = $('div.'+ id).offset().top -selectorHeight;
Which means that $('div.'+ id) is not selecting anything.
This tells me that you're not formatting your HTML the way SMINT needs you to. You need to follow their <div> and **class** structure.
StumbleUpon publishes a Widget script, and documents how to use it to insert a stumbleUpon button (they call it a badge), into a website.
You can generate the markup for a button with their online tool. It looks like this:
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2" location="http://example.com"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
(function() {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
That script element is just a way to delay-load the widgets.js thing. Just from looking at it, I suppose that it works by scanning the document for the <su:badge> elements and replacing them with iframes. The iframes themselves then get their source content from stumbleupon, at a URL like this: http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com .
The iframe renders visually like this:
The stumbleupon button is the 2nd one. I show the other ones for comparison.
As you can see, the StumbleUpon rendering looks different than all the other guys. SU makes their button look like a "badge" while every other social share widget looks like...uh.... a button.
I'm trying to make the Stumbleupon widget look like a button. I'm pretty sure this is possible. For example, mashable does it (example). Here's what it looks like:
As you can see, the stumbleupon button looks like a button. It's not a badge. Mashable is not using the su:badge thing - they have rendered their own <a> tag, and styled it.
The visual rendering is not a problem; I can figure out how to make a span look like a button, no problem. The problem happens when I click the tag or span. It appears to me that, with the iframe-thing that StumbleUpon uses, it invokes this URL to submit a page for sharing:
http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever HTTP/1.1
The iframe uses javascript's window.open to request that, and restricts the resizing and so on. This is how it works on mashable. The resulting window looks like this:
This is also what the mashable page does, though it does not use the iframe. The Mashable page contains javascript that just opens the "stumbleupon submit" window directly from within the main mashable page.
But when I try the same thing from my page, the little fixed window gets a 302 redirect from StumbleUpon, and then another 302, which eventually points it to
http://www.stumbleupon.com/submit/visitor
...which does not allow sharing of the link.
This has been a long story, but:
does anyone have any insight as to how I can convince StumbleUpon to let me share a link or URL, from a button that is not contained within an iframe?
What is mashable's secret?
ok here's what I found.
The 302's that eventually pointed me to /submit/visitor happen when both of the following are true:
the user is not logged in
the article has not been stumbled in stumbleupon previously
When that happens, stumbleupon invites you (the user) to login. It won't take you just to the "submit url" page.
If the user is not logged in, but the article HAS been submitted previously, then it takes you to the submit window without a 302. Eventually you will be asked to login, if you proceed with the submission. But the first view of the stumbleupn website in this case gives you a visual indication that you are submitting something.
If the user is logged in, and the article has not been submitted previously, then you get taken right to the submit page.
So I was doing nothing wrong. I just needed to login the first time. This is just an artifact of the user experience offered by StumbleUpon. In my opinion it's sort of strange. It's surprising and therefore wrong. But that's just my opinion.
I have a small requirement..
if the user dint sign off or log off then he try's to close the browser IE clicking on 'X' (top right of IE or Firefox browser ) then i need to ask a conformation message like "Are you sure you want to close ?" ...
I am using Master page in my application and i tried the event : "window.onbeforeunload " in my master page its works fine, shows an alert(conformation) message. but if i press back button on the browser(IE on IE or Firefox) then also its firing(but it should not) is there any way to full fill my requirement ..I hope i had explained u clearly...if not pl z let me know........
what i mean to say is.. if the Session("USerid") is active or if it contains any value ie.
Session("USerid")="XXX"
at that moment if user trys to close the browse(click in 'X'/Close button browser either IE or Firefox ) it should give prompt a message "are u sure do u want to close?"..
Its all about design steps - but the close and the back button is the same, the close the page, so maybe its impossible to have them all together.
To open, close your script you can make a simple trick. Place them inside a literal and open or close it.
<asp:literal run="server" id="txtCloseAlert">
<script>
... you code here ....
</script>
</asp:literal>
and on code behind.
txtCloseAlert.visible = !string.IsNullOrEmpty(Session("USerid"));
I've looked into this recently and there does not appear to be a standard / consistent way to do this cross-browser hence you back-button problem.
On IE at least you get an event object passed as a parameter to the onbeforeunload method that you can use to get the mouse position, but in FireFox you don't and you would need some other way to determine whether a confirmation is required. It is quite posible that you could get the mouse position in some other way as I haven't looked into that. Point is that if your mouse is not on your form you probably want a confirmation.
You can look at this SO question:
Prevent browser from closing in asp.net
Or do an Internet search on 'onbeforeunload prevent browser closing'.
In your case a synchronous ajax call can be made to the server to do the test.
HTH
I've made a HTA that just links to a website and once you're there you can navigate through several different pages. It's not an application that can change or access anything on the computer.
My problem is when I try to put a frame or an iframe in a page with an external website inside this frame, script errors keep popping up. When I view these same webpages on Internet Explorer 9, no errors show up.
Error Example:
http://i39.tinypic.com/keyfs4.gif
I know HTAs can access the files on a computer and have higher privileges and security over normal pages that are viewed in a browser. Is this the reason script errors show up when on a HTA?
Is there any way I can stop these errors coming up?
Your script has errors. You need to fix them.
The difference is, the Web Browsers a HTML with script errors are less likely to show all script errors. The usual symptom is your script does not run correctly but you're not given any indication as to why.
As a HTA, your same script errors will display as a dialog box. This will tell you why your scripts do not run correctly.
As a personal rule, I generally prefer to code first in HTA so that I can locate and fix errors before deploying them as HTML.
Take the following code example. As a HTA when you click on the Test button it will correctly show "Begin" then it will correctly report your script has a Division by Zero error. As a HTML, in Internet Explorer, the test button will just show "Begin" and then it will abort without giving you any indication why.
<html>
<head>
<title>test</title>
<script language="VBScript">
Sub btnTest_onClick
MsgBox "Begin"
MsgBox 100 / 0
MsgBox "End"
End Sub
</script>
</head>
<body>
Click on this button: <input type="button" id="btnTest" value="Test"/>
</body>
</html>
#BicycleDude - the errors are not located within #user990175's code but within the external website he is loading into an iframe. So he can't really control the errors that are thrown in 3rd party code.
#user990175 - the issue you're seeing is a result of the third party code using htc's which I'm 90% sure are not supported in hta's, or have special considerations anyway. Either way you should be able to disable error notifications via the error prompt itself or under Tools > Options > Advanced tab > Browsing section > Dispaly a notification about every script error.
That doesn't mean the functionality will magically work, it just means you won't be prompted with the pesky dialog box.