Twitter share button shows blank page. Why? - javascript

I want to share my twitter button on the blog posts. It is working fine in 18 posts out of 20. Only 2 posts have problems. The blank window appears on clicking the button with no text, url and via etc...
The URLS
National Tour Announced For Disney’s The Little Mermaid
MLB Venues – How A Team’s Form Is Effecting Ticket Prices At Their Homes
Is my code good or what happened here ? Please assist me.
.tweet{ margin:0px auto; width:200px; text-align:center;}
.tweet a{ display:inline-block; line-height:50px; color:#f00; text-decoration:none; background:#ccc; border-radius:5px; padding:0px 20px;}
<div class="tweet">
<a title="Twitter" href="//twitter.com/intent/tweet?share=" onclick="tweetShare=window.open(this.href+escape(window.location)+'&text='+escape(document.getElementsByTagName('title')[0].innerHTML)+'&url='+location.href+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no'); return false;"
target="_blank">Twitter</a></div>

Looking at Chrome Developer console you will find out twitter server returned a 400 error. That was because you didn't encode the url (especially, the title parameter) correctly.
Note the %u2019 character after the Disney. Its an encoded unicode character. Actually twitter expects you encode it as UTF-8.
text=National%20Tour%20Announced%20for%20Disney%u2019s%20The%20Little%20Mermaid
The solution is to use encodeURIComponent() instead of escape(). This code should work fine:
<div class="tweet">
<a title="Twitter" href="//twitter.com/intent/tweet?share=" onclick="tweetShare=window.open(this.href+encodeURIComponent(window.location)+'&text='+encodeURIComponent(document.getElementsByTagName('title')[0].innerHTML)+'&url='+location.href+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no'); return false;"
target="_blank">Twitter</a></div>
Anyway escape() is deprecated so please try encodeURIComponent instead.
BTW
There's no share parameter supported in tweet button documentation. url is enough.
document.title works as perfect as the long version document.getElementsByTagName('title')[0].innerHTML.
Don't create an extra global variable tweetShare, if not used.
So this may be simplified as:
<div class="tweet">
<a title="Twitter" href="javascript:window.open('https://twitter.com/intent/tweet?url='+encodeURIComponent(location.href)+'&text='+encodeURIComponent(document.title)+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no')">Twitter</a></div>

Related

Toggle Accessibility for a website

I am working on a toggle button for enabling/disabling accessibility on a website. Similar to that in iphones.
For example, on the canada.ca government website, they shouldn't have italics but clients rarely consider accessibility when writing their contents.
I was thinking of this idea but I'm not sure if it's a good solution.
Any suggestions/feedback?
You will have to think about everything you wish to change in order to improve "accessibility"... Or be it "readability".
Example:
italic
fonts smaller than __ px
font colors
etc.
So if you taugth about it just a bit, at writting time, by adding some classes... A data attribute can be used to match them and provide a button to toggle these classes out.
Then, the user could "remove those harder to read styles.
$(document).ready(function(){
$("#control button").on("click",function(){
$("*[data-readability]").each(function(){
$(this).toggleClass($(this).data("readbility"));
});
});
});
.small{
font-size:0.4em;
}
.italic{
font-style:italic;
}
.yellow{
color:yellow;
}
#control{
position:fixed;
top:0.5em;
right:0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<span class="small" data-readability="small">This is real small fonts.</span> <span class="italic" data-readability="italic">This is italics.</span> <span class="yellow" data-readability="yellow">This is a hard to read color.</span>
</div>
<div id="control"><button>Click here for a better readability</button></div>
So if all the styling left is not a problem to readbility... And the page still is acceptably nice, that's a way.
Now what can possibly be a problem to readability and accessibility is defined somewhere here.
I think the idea is better than having no accessibility, however by using semantic HTML generally it is not hard to make sites accessible so I would just work on making the page/site accessible as a whole and not only based off a toggle.

Inline JavaScript in `href` not working as expected in Firefox

Why doesn't this inline javascript work in Firefox? And how can I get it to work correctly in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {display:inline; padding:0px 7px 0px;}
h2 a {text-decoration:none}
h2 a:link {color:#FFFFFF;}
h2#s0 {background-color:black;}
</style>
</head>
<body>
<h2 id="s0"><a href="javascript:document.getElementById('d0').style.display='block';">
Click me!</a></h2>
<div id="d0"
style="width:98%;border: 5px solid #000000;padding:3px; display:none;">
When you click the heading, this text should appear with a black
outline, with no gap between that and the heading background.</div>
</body>
</html>
In Safari this appears as it should.
In Firefox it momentarily appears with a gap (as if the browser's in
quirks mode) then everything on the page vanishes, replaced by the word "block". At first I thought that meant Firefox was blocking it, but it says "inline" instead if that's what I set the style to display.
EDIT: The Javascript part of my problem is now solved. But there's still a difference in the way the heading background appears: it extends down to the div border in Safari, but not in Firefox. Is there a way to make it do so in Firefox?
The closest working form of what you have is:
<a href="javascript:void(document.getElementById('d0').style.display='block');">
Because:
When a browser follows a javascript: URI, it evaluates the code in the
URI and then replaces the contents of the page with the returned
value, unless the returned value is undefined. The void operator can
be used to return undefined.
onclick is the better option here.
On OSX firefox version 41.0.1 I also experienced the same issue in fiddle. I do not know why it does not work, it could be a bug in FireFox but you can do this to have a somewhat similar working solution:
<a href="#" onclick="document.getElementById('d0').style.display='block';">
Replace your link with this:
<a href="javaScript: void(0);" onclick="javascript:document.getElementById('d0').style.display='block';">
As far as i understand it, Firefox tries to open a URL if you put the javaScript call into the href attribute. (as you can see in your location bar)
Putting it in the onclick instead makes it work fine.
I guess you could also use some preventDefault or such, and you could also try a href="#", but the a href="javaScript: void(0);" works just fine and is robust through all browsers i have tested so far.

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

How to write this javascript without using apostrophes

I'm trying to get a line of flags wiht google translate on my site. This other site already has it, but it uses blogger API. I changed the JS accordingly, but I found out that my forum software encodes de apostrophe as \'
Is there any way I can write the same html+js below without using apostrophes?
<a target="_blank" rel="nofollow"
onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(document.URL)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Chinese (Simplified) BETA"><img style="border: 0px solid ; cursor: pointer; width: 24px; height: 24px;"
alt="Google-Translate-Chinese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png"
title="Google-Translate-Chinese">
As it is, the forum engine translates it as ""window.open(\'http://www.google.com/translate?u=\'+"
Try using something like this
onclick="window.open(\"http://www.google.com/translate?u=\"+encodeURIComponent
(document.URL)+\"&langpair=pt%7Czh-CN&hl=pt&ie=UTF8\"); return false;"
Since you are already using escape string, your forum engine might not replace this with another '\'.

Cant explain why page wont work in IE

At the top of this page: http://andrew-muir.com/search/2/#1 - When you click on the slider it will load new results using AJAX into a div. When i chose certain prices on the slider the results look fine in IE and when i chose other prices the results come back all broken.
Any ideas? Thanks!
There's a lot of invalid markup in the HTML fragment that comes back from the slider actions. You've got some unclosed tags, etc.
Example:
<div style="background-color:#252525; padding:5px 10px; height:130px; position:relative;">
<p class="bold" style="color:#8a96a4; margin-bottom:0.5em;">Blue Lucerne lotus jug</p>
<p class="bold" style="color:#FFF; margin-bottom:0.5em;">£4250</p>
<p style="margin-bottom:0.5em;"><p><strong>Superb and very rare 30cm lotus jug in the bl…</p>
<p class="boldred" style="position:absolute; bottom:0px; left:10px;">View details ></p>
</div>
That line with the "Superb and rare" text has an unclosed <strong> tag.
When I try to look at the broken page in the IE 8 developer tool, it won't show me the content of the main <div>. That's a sure sign that the browser has just thrown up its hands in frustration.
edit — weird; it just started working ...

Categories

Resources