Is it possible to change the destination of a link based on whether the user has a mac or a PC using javascript?
To give an example: The Apple website allows download of Quicktime but it "knows" whether you are using a mac or a pc and directs you to the relevant page.
Background/Reason for doing this: I have built a website for someone and they have a number of audio and video files on there. Ideally they want it so that if the user is on a mac it will download a quicktime version of the file but if they are on a PC it will download a Windows Media Player file.
Cheers
CHRIS
You can check the UserAgent header to tell Mac and PC browsers apart.
Yes. It's not foolproof, but can be done. Here's a sample of Javascript detecting your OS. You could simply opt to display a different div or something similar depending on the result.
Here is an example
<html>
<head>
<script type="text/javascript">
function yourOS() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("win") != -1) {
return "Windows";
} else if (ua.indexOf("mac") != -1) {
return "Macintosh";
} else if (ua.indexOf("linux") != -1) {
return "Linux";
} else if (ua.indexOf("x11") != -1) {
return "Unix";
} else {
return "Computers";
}
}
</script>
<body>
<h1>Welcome to GiantCo Computers</h2>
<h2>We love
<script type="text/javascript">document.write(yourOS())</script>
<noscript>Computers</noscript>
Users!</h2>
</body>
</html>
from http://www.java2s.com/Code/JavaScript/Development/Getusersoperatingsysteminformation.htm
Related
I have a PDF opening in an iFrame using Fancybox. Is it possible to width to screen so in a mobile portrait view, it shows the whole thing, albeit tiny?
I think you can be interested with this example which I Posted September 17, 2015
https://www.autoitscript.com/forum/topic/177368-how-to-get-reference-to-pdf-object-embeded-in-ie/
Firstly you should change size of iFrame Element.
In a second step you should inspect iFrame nad check how PDF object is embeded
For example this could look like this:
<script language="JavaScript">
function rsChange ()
{
var ax = document.all.TestObj;
if ( ax.readyState == 4 )
{
if ( ax.IsInitialized == false )
{
window.setTimeout( "rsChange();", 100 );
}
else
{
ax.Server = "192.168.1.3";
ax.Connect ();
}
}
}
</script>
<OBJECT language='javascript' ID='TestObj' CLASSID='CLSID:36D64AE5-6626-4DDE-A958-2FF1D46D4424' WIDTH='640px' HEIGHT='480px' onreadystatechange='rsChange();'></OBJECT>
<br><br><br>
Don't forget to do a "REGSVR32 UltraVncAx.dll", before viewing this page.<br>
The timer trick in the rsChange() function is required to get the windowful ActiveX initialized properly, before letting the ActiveX create the VNC client child window.
</body>
</html>
In such case you should change parameters in this following object:
<OBJECT language='javascript' ID='TestObj' CLASSID='CLSID:36D64AE5-6626-4DDE-A958-2FF1D46D4424' WIDTH='640px' HEIGHT='480px' onreadystatechange='rsChange();'></OBJECT>
I'm trying to make my webpage fullscreen. I've made it work on Chrome, but for some reason it wont work on safari. Anyone know why?
<img onclick="launchFullscreen(document.documentElement);" src="http://e-daktik.dk/ranger.gif" alt="">
<script>
// Find the right method, call on correct element
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
</script>
It would be better to try and have the user simulate this themselves (by clicking F11 or any other key for their specific browser) because this will only work with Google Chrome and Internet Explorer. You should have a message saying to click F11 or something if you really need your webpage to be full screen. I hope this helped you.
How to change the default camera app in Windows 10 desktop ? The option is available from Settings in Phones but not from Desktops
If you want to make 'advanced' photo capture, then you can use MediaCapture class. Everything about this you will find at MSDN. There are also quite nice samples at GitHub.
It also seems that my old post for WinRT is still quite relevant. You will find there that I'm using GetCameraID:
private static async Task<DeviceInformation> GetCameraID(Windows.Devices.Enumeration.Panel desired)
{
DeviceInformation deviceID = (await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture))
.FirstOrDefault(x => x.EnclosureLocation != null && x.EnclosureLocation.Panel == desired);
if (deviceID != null) return deviceID;
else throw new Exception(string.Format("Camera of type {0} doesn't exist.", desired));
}
to choose a device to be used to capture the photo. In your app you can enumerate devices and choose the one that suits you.
I used to call Google Translate TTS to download an audio file using this url:
http://translate.google.com/translate_tts?tl=en&q=Hello+world!
However Google changed the way that works and therefore I can no longer download the audio files.
I've signed up for a free trial for Google Translate API V2, but can't find how to get the TTS audio files.
Any idea?
You can use that link without captcha..
https://translate.google.com/translate_tts?ie=UTF-8&tl=tr-TR&client=tw-ob&q=Batsın+bu+dünya+bitsin+bu+rüya
I stumbled across this thread and wanted to give my take on it, with reference to #Alexandre Andrade, mainly because he didn't submit any code.
I did this in a react app, but the same procedure should works for a vanilla web project.
I did add the meta tag to my head public/index.html,
<head>
...
<meta name="referrer" content="no-referrer">
...
</head>
Then added the audio tag in my component:
Javascript:
const playTTS = (text, lang) => {
// Get the audio element
const audioEl = document.getElementById('tts-audio');
const url= `https://translate.google.com/translate_tts?ie=UTF-8&tl=${lang}&client=tw-ob&q=${text}`;
// add the sound to the audio element
audioEl.src = url;
//For auto playing the sound
audioEl.play();
};
html
...
<audio controls id="tts-audio"/>
...
Then it's just a matter of hooking the function up to some of your life cycle methods. Since I wrote my react code in react hooks, I added the function call in one of my hooks to get it initialized when the component was loaded. (this would be in the componentDidMount() function otherwise).
Hope this helps anyone out!
try this link for English:
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=en&q=Hello+World
For Chinese (Puthonghua)
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=zh-CN&q=世界+你好
Text-to-speech was always an 'unofficial' API which is now captcha-protected to prevent abuse. It was never advertised as part of the Translate API, and currently there is no TTS functionality in the Translate V2 API, paid or otherwise.
There is some more background on the following groups thread which had been ongoing for some time.
Here's to those who have desperately been trying to play Google TTS as an audio in HTML: let me save you a couple of hours of time and tell you how to do it.
Let's say we have this link:
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=en&q=I+love+coffee
If you try to play this audio given the link and using <audio>, <iframe>, using third-party libraries or playing it with Javascript...
var audio = new Audio('https://translate.google.com/translate_tts...');
audio.play();
...then you'll soon find out that none of the aforementioned ways work as Error 404 is being thrown.
Solution
Apparently, the only possible way to play this TTS generic audio is to utilise <embed> tag wrapped into a custom <iframe> and giving the link a unique version number (it is important, as caching by browsers prevents the audio from playing for some reason).
Here is the solution for our example: (assuming you have an iframe#ttsiframe)
function playTTS(lang,sentence) {
//get the iframe
var iFrame = document.getElementById('ttsiframe');
//remove its sandbox property
iFrame.removeAttribute('sandbox');
//this is your reference variable for the iframe body and head tag
var iFrameBody;
//get the body
if (iFrame.contentDocument) { // FF
iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
iFrameHead = iFrame.contentDocument.getElementsByTagName('head')[0];
}
else if (iFrame.contentWindow) { // IE
iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
iFrameHead = iFrame.contentWindow.document.getElementsByTagName('head')[0];
}
else {
iFrameBody = iFrame.contentDocument.body;
iFrameHead = iFrame.contentDocument.head;
}
//generate link to Google Translate TTS using arguments (pay attention to random version number at the end)
var link = 'https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=' + lang + '&q=' + sentence.replace(/ /g,'+').replace(/[.]/g,'') + '&rd=' + getRandomInt(0,50000000);
//add embed element with our link
iFrameBody.innerHTML = '<embed src="' + link + '" id="TTS">';
//isolate iframe
iFrame.setAttribute('sandbox','');
}
you can simply use the link:
Text to Speech
I'm working on a Windows 8 Metro app and I've found (even on their sample applications where I haven't touched the code) that as you navigate between pages, the top level "default.html" acquires every single js and css file ever loaded during the application's run.
This is causing me a lot of headaches as my css is colliding between difference pages. Am I missing something or is this is serious bug?
Not unloading JavaScript and CSS was a deliberate choice, not an accident or oversight.
First off, understand that page controls are purely a JavaScript construction - the browser engine has absolutely no knowledge of them. The browser just sees a chunk of DOM that was dynamically generated by scripts.
The web platform doesn't let you unload script files - once they're loaded into the context, they're there forever.
With CSS, they could have tried removing tags, but it opens up a can of worms. Depending on which order pages are navigated to, you could end up with different styles applied in the same app. What if two pages refer to the same style sheet? Do you add the same link tag twice? And which one do you remove?
It's a mess. Instead, WinJS guarantees that scripts and stylesheets will be loaded once and only once, the first time they're referenced. So you can have every page in your app reference "myStyles.css" and it'll only be loaded once (and there will only be one style tag).
So what do you do to prevent the issues you're seeing? First off, remember you're building an app, not a web site that will arbitrarily grow new content. Decide on your general styles and classes. Put shared styling in your default.css and reference it from your default.html file.
For individual pages, the easiest thing to do is prefix your styles with the page name. Instead of:
<div class='intro'></div>
do
<div class='page1-intro'></div>
Then you're guaranteed to avoid collisions.
If you're referencing page elements by ID, well don't do that. Using ID's in pages causes all sorts of potential weirdness (what if you render the same page control twice at the same time? Also, the ID doesn't exist until after the page has been loaded into the DOM, which means data-win-options references by ID don't work). But if you insist, again, consider prefixing the ids with the page.
Basically, set up ad-hoc namespaces to keep you from colliding. It's a lot easier than ripping out link tags manually and will result in a lot better app experience than doing full navigations.
Its not a bug, it is part of the default app pattern used by the WinJS tempaltes. The default WinJS templates use a single-page model, meaning that all content is loaded into the default.html using a PageNavigatorControl. As a result, there is a single DOM in memory at all time. If you followed a similar pattern in a regular browser, you would see the same behavior.
You can, if you want, use more traditional navigation using multiple pages and traditional href links. That is not the recommended approach, but if you are trying to bring existing web assets built using that model, it can make things easier.
You can resolve this problem by querying the document for the link elements that import your styles and disabling the ones you don't want. You need to make sure that you don't disable the MS CSS files and the default.css file in your project, assuming you use it to define the common styles for your app.
Here is a sample that shows you how to do it. This is a file called page2.html which, when loaded by the WinJS.Pages.UI.render method will locate and disable the link elements it doesn't want. It makes sure that the page2.css file is enabled and keeps a list of the files it simply ignores.
(I put this in the ready handler function, but I tend to use this technique in the handler for the WinJS.Navigation events and rely on consistent file naming to get the result I want).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UnloadCSS</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- UnloadCSS references -->
<link href="/css/page2.css" rel="stylesheet" />
<script>
WinJS.UI.Pages.define("/page2.html", {
ready: function () {
var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"];
var myCSS = "/css/page2.css";
WinJS.Utilities.query("link").forEach(function (linkElem) {
if (linkElem.href.indexOf(myCSS) > -1) {
linkElem.disabled = false;
} else {
var ignore = false;
ignoreList.forEach(function (ignoreItem) {
if (linkElem.href.indexOf(ignoreItem) > -1) {
ignore = true;
}
});
if (!ignore) {
linkElem.disabled = true;
}
}
});
}
});
</script>
</head>
<body>
<button>Change </button>
</body>
</html>
this could be a good solution with a convention names aproach :
var currentPage = Application.navigator.pageControl.uri.replace("ms-appx://" + Windows.ApplicationModel.Package.current.id.name.toLowerCase(), "");
var currentCss = currentPage.replace(".html", ".css");
var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"];
WinJS.Utilities.query("link").forEach(function (linkElem) {
if (linkElem.href.toLowerCase().indexOf(currentCss) > -1) {
linkElem.disabled = false;
} else {
var ignore = false;
ignoreList.forEach(function (ignoreItem) {
if (linkElem.href.toLowerCase().indexOf(ignoreItem.toLowerCase()) > -1) {
ignore = true;
}});
if (!ignore) {
linkElem.disabled = true;
}
}
});