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 '\'.
Related
I have created a template to redirect to a specific website . And I am passing website dynamically . So when user click It must redirect to then this dynamic website href="*|URL:redirect_link|*". But Instead of this website finding link on Mandrill website like this https://mandrillapp.com/templates/*%7CURL:redirect_link%7C* . It should open as a new website. What Wrong I am doing ?
<a class="mcnButton " title="Register and explore!"
href="*|URL:redirect_link|*"
target="_blank"
style="font-weight: normal;
letter-spacing: normal;
line-height: 100%;
text-align: center;
text-decoration: none;
color: #FFFFFF;
">Register and explore!</a>
Sorry i was wrong. here is the details from mailchimps knowledge base:
*|URL:YOUR_MERGETAG|*
Encodes the value of your merge tag for inclusion in a URL. For
example, if you have a list field with the merge tag, |QUERY|, and
the value includes something like I love monkeys — in your link, use
http://www.yourwebsite.com/|URL:QUERY| to URL encode the value like:
http://www.yourwebsite.com/I+love+monkeys.
more info can be found here.
Hope that helps.
I want to build a simple online editor like plunker. Does anyone know how to accomplish the live preview, once several files (.html, .css, .js, .json) have been uploaded?
Taking JSBin as example, there are only 1 html text, 1 css text and 1 js text, so it is simple: we just need to construct one complete html file from these texts and use Document.write().
However, how do editors such as plunker, brackets, vscode do live preview? Do they also construct one complete file by themselves or they use some third-party tools?
Live previews are pretty easy. Just replace the HTML of an area on the page with the HTML the user provided. In practice, you probably want to do this in a sandboxed iframe for security purposes.
The snippet below shows how this can be done, all in JavaScript. Try running the snippet and typing in the box.
function doLivePreview() {
$("#output").html($("#source").val());
}
$(function() {
doLivePreview();
$("#source").on("input", doLivePreview);
});
#source {
float: left;
}
#output {
float: left;
border: 1px solid #AAA;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="source" cols="50" rows="8">
Type to see a live preview
<br/>
<a href="https://www.google.com">Google<a>
</textarea>
<div id="output">
</div>
I need to include a HTML which adds a preview pane inside a JavaScript function, something like this :
<html>
<body>
<div style="height: 70%; border: 1px solid #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">master</div>
</div>
<div style="height: 30%; border: 1px solid; #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">detail</div>
</div>
</body>
</html>
just use quotes around html like
var a = 'some string';
just you will have to have all hmtl in 1 line or add line by line to var.
Or use ES5 and just make like this:
let a = `any
string
with new lines`;
Or
Use jsx with ReactJs for html inside js! It's awesome :-) Last time i wrote html outside js was like 2 years ago..
https://facebook.github.io/react/
great place to start learning:
https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr
I'm not exactly sure if this is what you are asking...
Do you want to add HTML dynamically via JavaScript?
This is a way to do it with jQuery:
var html = '<div id="whatever"></div>';
$("body").prepend(html);
If you want to write html markup in javascript you can move towards React JS this is very power full engine for writing html markup in javascript it provides lot of others things.
You can:
use some template engine like:
mustaches https://github.com/janl/mustache.js/
angular https://angularjs.org/
write the code as text inside a var and then append it to them dom. (see document.write())
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>
I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.
I understand I need to use Content-Scripts for such tasks, which is clear and fine.
The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.
I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.
How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?
Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.
I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :
Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.
I've tried with Web Developer Tools, and that worked very well :
I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)
if you want to try with a Web Developer Tool :
just paste this code instead of the original <div id="rhs">...</div>
<div id="rhs" style="
border: 2px solid red;
padding: 16px;">
Put whatever you want here
<div style="
font-weight: 700;
padding: 12px;
border: 1px solid #aaa;
background-color: #eee;
margin: 20px;
-webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size: 1.4em;
">
Custom CSS
</div>
<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
<iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://example.com" frameborder="0"></iframe>
</div>
and you'll get the same result as me.
Hope I helped you ! :)