We Keep Coding

Problem with JavaScript doesn't work on mobile

Hello guys I've met a problem with one JavaScript which doesn't work on mobile but works really well on PC.
Somebody could to give me any advice what I could to change? I'm working on the project free of charged website for people studying Polish and it would be perfect to put it on one page :) thanks in advance
$(function() {
$('a.say').on('click',function(e){
e.preventDefault();
var text= $('input[name="Text"]').val();
text = encodeURIComponent(text);
console.log(text);
var url = "https://translate.google.com/translate_tts?ie=UTF-8&q=" + text + "&tl=pl&client=tw-ob";
$('audio').attr('src', url).get(0).play();
});
});
HTML
<input type="text" name="Text">
Check it
<audio src="" class="speech" hidden></audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</div>`

Try with a simple code like alert() . if it don't works your mobile browser doesnt support javascript.
if works your speech system not working

Template Engine and Unexpected string constant in IE8 - JavaScript

I've got huge problem when doing HTML compilation with Template Engine build in JavaScript.
Everything is working for Chrome, FF.
IE8 works just in one case - when my HTML is set as variable.
Scenario for HTML:
1). Below example works in all browsers (even in IE8)
var phone_tpl = '<div class="demobile-view">'+
'<div class="heading clearfix">'+
'<span class="attention">{{& attention}}</span>'+
'<h4>aaa</h4>'+
'</div>'+
'</div>';
2). Below example work in CHrome, FF. IE8 won't work with it.
<script type="text/template" id="phone_tpl">
<div class="demobile-view">
<div class="heading clearfix">
<span class="attention">{{& attention}}</span>
<h4>aaa</h4>
</div>
</div>
</script>
Second point in IE8 console responds with error "Unterminated string constant".
I'm attaching full package of library + init example.
http://jsfiddle.net/2trv57rk/
Really believe that someone will be able to help me :) I hate writing HTML in quotes :) I need to have clear, well-coded alternative.
Thank you in advance !!

Changing the src of an Image in HTML5 and Javascript using Jetbrains Webstorm

so I've been trying to make X and Os for a HTML5/JS course project thinking it would be easy, but have had several days of trouble trying to change an image's source from "Tile.png" to "XX.png". I have found similar threads on the site on very similar problems, but none of them worked for me, they all got the 'rare' error though, so I'm thinking there's a double whammy going on here. Help pls!
Here are the two errors I've seen during the hundreds of attempts using javascript and HTML5 for various attempts.
Uncaught ReferenceError: $ is not defined client.js:102
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
or
attempt to set image src to null (This showed up in most attempts, the other error is a rare occurrence that shows up when I think I've nailed it.)
-
The code consists of a HTML5 file and a Javascript file which just holds variables that aren't used yet. Here is the problem code showing the javascript function and the HTML button and clicking that runs it. The error pops up when the button is clicked, so I believe the code is in the javascript part.
<script>
function YUNOCHANGE()
{
var img = document.getElementById("tst1");
img.src = "Images/XT.png";
}
</script>
<button onclick="YUNOCHANGE();" type="button" id="tst1" name="One" alt="Grey tile" height="175" width="200" style="text-align:center">
<img src="Tile.png"/>
</button>

The Button has no property "src":
<script>
function YUNOCHANGE()
{
var img = document.getElementById("img1");
img.src = "Images/XT.png";
}
</script>
<button onclick="YUNOCHANGE();" type="button" id="tst1" name="One" alt="Grey tile" height="175" width="200" style="text-align:center">
<img id="img1" src="Tile.png"/>
</button>

Swap images with single button JavaScript function using %

Fellow Programmers! A wonderful afternoon (or whatever the case) to you!
With some assistance of fellow users I was able to manage getting an image to change back and forth between a second image every couple seconds. It's awesome! So I counted out some of the math with the % operator, and sure enough when the image first displays, I get the default broken link image of the browser, but after the 2 seconds everything goes as planned.
So begins this investigative experiment.
I decided instead of swapping automatically, lets make the swap with a button as to be able to investigate the page as long as I would like. But who want's to do the exact same thing again, why not learn another cool trick along the way. That trick is to display both of the images at the same time, such that when the button is clicked they swap places. Same math, different effect for the user. Isn't that awesome!
The goal:
display two images and below them one button. When the button is clicked the images are to swap places. The images that was on the left should be on the right, the one on the right ought now be on the left. Use no jQuery, this is after all a JavaScript experiment (and I have yet to learn much jQuery but I can't wait to get there!)
Browser error console messages:
Interestingly enough firefox give me nothing. I open the browser, load the page in it from VS 2012 clear the error conslole, refresh the page. And nothing.
In chrome (my default browser) however, I get a localhost pic src 404 not found.
I find this strange because this code is on a page that happens to have other code which references those same pictures and works fine. The 2 second auto img flip thing being some of that other code.
debugging:I'm to much of a noob to know what's going on with that. I get the basic Idea and looked into it some. On the VS site there's all this info about setting breaking points and running multiple instance of VS to do something with another engine. I will soon be on youtube to hammer that out. I apologize however, if there is some simple debug fix to this and I should have witnessed it. Hammering through my 2nd web class and that topic has not been covered :(
Here are articles that I found similar to my question.
This was helpful to see how they had set up the if else:
https://stackoverflow.com/questions/15671442/swap-image-with-onclick-not-responding
all in all that turned out to be more that I could read, clearly the writer is more advanced than I.
a second: javascript swap text block onclick anchor link a bit of an information overload I think. There was a lot going on with that, but I never managed to change any of my code after reading through it.
If your curious here is the VS article I briefly mentioned:
http://blogs.msdn.com/b/visualstudioalm/archive/2013/06/28/javascript-native-interop-debugging-in-visual-studio-2013.aspx
And here is my code:
<script type="text/javascript">
function swap_pics() {
var c = 1
//I had:
//var andy_arr = ["andy_white.jpg","andy_black.jpg"];
var andy_src1 = "andy_left.jpg";
var andy_src2 = "andy_right.jpg";
c = ((c + 1) % 2);
if (c == 0) {
//I was using an array which looked like:
// document.getElementById('andy_left').src = "andy_arr[0]";
// document.get ... _right').src = andy_arr[Math.abs(c-1)];
//0-1 abs = 1
//1-1 = 0, so It looks like it should now toggle.
document.getElementById('andy_left').src = andy_src1;
document.getElementById('andy_right').src = andy_src2;
}
else {
document.getElementById('andy_left').src = andy_src2;
document.getElementById('andy_right').src = andy_src1;
}
}
</script>
<div id="mini_lab_5">
<img src=""
id="andy_left"
height="100"
width="100"
/>
<img src=""
id="andy_right"
height="100"
width="100"
/>
<br />
<input type="button" value="Swap"
onclick="swap_pics();
"/>
</div>
Thanks for being a part of the community and making it great!

You could add the images directly to your img tags like this :
<img src="andy_left.jpg"
id="andy_left"
height="100"
width="100"
/>
<img src="andy_right.jpg"
id="andy_right"
height="100"
width="100"
/>
Then your images should appear by default in your page, if not your links to the images are not good.
Then you could replace your current swap_pics function with the following :
function swap_pics() {
var andy_left = document.getElementById('andy_left'),
andy_right = document.getElementById('andy_right'),
andy_left_src = andy_left.src,
andy_right_src = andy_right.src;
andy_left.src = andy_right_src;
andy_right.src = andy_left_src;
}
Here is a simple jsfiddle doing this: http://jsfiddle.net/X9YTP/

Here you go good luck.
<html>
<head>
<script type="text/javascript">
function switchImage () {
var imgleft = document.getElementById('image1'),
imgright = document.getElementById('image2'),
img_left_src = imgleft.src,
img_right_src = imgright.src;
imgleft.src = img_right_src;
imgright.src = img_left_src;
}
</script>
</head>
<body>
<div>
<img id="image1" src="./home-cat.jpg" />
<button id="butnum" onclick="switchImage();">Switch</button>
<img id="image2" src="./images.jpeg" />
</div>
</body>
</html>

How to auto-translate a section using google translate tools?

This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.

I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.