how to script show in below 1000px - javascript

I have a script but used in same page. like two times. i got error while working when i working on desktop it's work but when i check on below 1000px then it's get error like:- Duplicate Embedded Players Detected.
I think it's worked when i open desktop then show desktop script and when i open mobile then desktop not show mobile script show. please help me how to do that. :-
this is the script i used:-
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
I used for this but it's show syntax error:-
<script>
if (jQuery(window).width() < 1000) {
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
}
</script>
Please tell me how to fix that issue. Thanks alot

if (jQuery(window).width() < 1000) {
<script type="text/javascript" ...snip...></script>
}
This code is Javascript, so you need to construct a script element in Javascript and append it to the document manually.
var headElem = document.getElementsByTagName('head')[0];
var scriptElem = document.createElement("script");
scriptElem.type = "text/javascript";
if (jQuery(window).width() < 1000) {
scriptElem.src = "play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox";
scriptElem.class = "mobile";
}
else {
scriptElem.src = "desktop.vidyard.com/.......js";
scriptElem.class = "desktop";
}
headElem.appendChild(scriptElem);

Related

Load different JS file for mobile and desktop

So I have two different JS files to load: one for desktop and a different one for mobile. And I have used this code:
<script>
if ( $(window).width() < 739) {
<script type="text/javascript"
src="https://example.com/js-file-for-mobile.js"></script>
}
else {
<script type="text/javascript"
src="https://example.com/js-file-for-desktop.js"></script>
}
</script>
But the only script that loads is the desktop one.
So I found the answer:
<script>
if (screen && screen.width > 900) {
document.write('<script type="text/javascript"
src="https://example.com/desktop.js"><\/script>');
}
</script>
<script>
if (screen && screen.width < 900) {
document.write('<script type="text/javascript"
src="https://example.com/mobile.js"><\/script>');
}
</script>
Verified and working!
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
if (screen.width() < 739)
{
js.src = "js/mobile.js";
}
else
{
js.src = "js/desktop.js";
}
head.appendChild(js);
I think checking screen size to decide if its mobile or desktop browser is a little risky as it may confuse sometime with iPad or small screen desktop.
So, We can navigator to check if its mobile or desktop and den our job accordingly.
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
your e.g:
<script>
if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) {
<script type="text/javascript"
src="https://example.com/js-file-for-mobile.js"></script>
}
else {
<script type="text/javascript"
src="https://example.com/js-file-for-desktop.js"></script>
}
</script>

Timbre.js keyboard input doesn't seem to work

I'm trying to learn the timbre.js javascript library. On the project page there is a functional preview of using the keyboard input to change oscillator pitch but once the code is copied to a new HTML document on my computer it no longer works. Simpler code snippets from the project page work fine once copied over though.
The project page is here: http://mohayonao.github.io/timbre.js/PragmaSynth.html
This is the code:
<script src="timbre.js"></script>
<script>
var VCO = T("saw", {freq:880, mul:0.2}).play();
var keydict = T("ndict.key");
var midicps = T("midicps");
T("keyboard").on("keydown", function(e) {
var midi = keydict.at(e.keyCode);
if (midi) {
VCO.freq.value = midicps.at(midi);
}
}).start();
</script>
It seems for T('keyboard') and T('ndict.key') you need to include an extra script called keyboard.js which can be found here. http://mohayonao.github.io/timbre.js/src/extras/keyboard.js
So your code will look something like this..
<script src="timbre.js"></script>
<script src="keyboard.js"></script>
<script>
var VCO = T("saw", {freq:880, mul:0.2}).play();
var keydict = T("ndict.key");
var midicps = T("midicps");
T("keyboard").on("keydown", function(e) {
var midi = keydict.at(e.keyCode);
if (midi) {
VCO.freq.value = midicps.at(midi);
}
}).start();
</script>

Google Feeds API setup not working in Chrome only

I'm trying to get the Google Feed API to work by simply copy-pasting the example code from Google's tutorial here: https://developers.google.com/feed/v1/devguide
(!) It works fine in every browser except Chrome.
I created an HTML file with this code (from Google's "Hello World" tutorial):
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
But when I load the HTML file, I get this error in the Chrome console:
Uncaught ReferenceError: google is not defined
What am I missing here?
I have found the problem. https://disconnect.me/ was running on Chrome and stopped the script from working.

jQuery is undefined & unexpected token

I have this script that positions a div's background in proportion with the window size:
// JavaScript Document
var jQNC = jQuery.noConflict();
jQNC(document).ready( function () {
setPunchMargin()
jQNC(window).resize( function () {
setPunchMargin();
});
});
function setPunchMargin() {
var windowWidth = jQNC(window).width();
if (windowWidth <= 980) {
var margin = 0;
} else {
var margin = Math.round((windowWidth - 980) / 2);
}
jQNC('.punch').css('background-position', margin + 'px 320px');
}
It works like a charm on my local machine, but when uploading it to the server i get jQuery is undefined and on the jquery library i get unexpected token error.
Can you tell me what is wrong here?
Thank you,
Radu.
You have jQuery included two times;
<script language="javascript" src="http://punchid.com/test/wp-content/themes/punch/js/jquery-1.6.1-min.js" type="text/javascript"></script>
And here;
<script type='text/javascript' src='http://punchid.com/test/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
The latter is an older version, I'd suggest removing that one from the code - But double check everything still works correctly afterwards.
This looks like you are not uploading or referencing jQuery correctly. Try using an absolute reference to a Jquery CDN like: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
(where 1.5.1 is the version of Jquery you'd need).

Android WebView not showing a JavaScript section of website

Thanks for reading!
I am using a WebView to show a mobile website. There is a page.html which does the AJAX xmlHttpRequest.responseText to fetch the page content.
I see the entire website except two sections displaying ads.
<div class="top-banner" class="top-rule">
<div id="hp_leaderboard" class="adContainer">
<script language="javascript" type="text/javascript">
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iphone')!=-1));
if(is_iphone)
{
OAS_AD('MISC1'); } else {
OAS_AD('TOP');
}
</script>
</div>
</div>
I have done
WebSettings = this.page.getSettings(); //page is a WebView
s.setJavaScriptEnabled(); //enable JavaScript
I am fairly new to HTML/JS. Could someone please help?
Thanks!
EDIT: Adding code. Note: The section below and the the <div> section above appears in the <body> tag
<script language="JavaScript"><!--
//configuration
OAS_sitepage = 'www.boston.com/mobile/homepage';
var agent=navigator.userAgent.toLowerCase();var is_iphone = ((agent.indexOf('iphone')!=-1));if(is_iphone) {
OAS_listpos = 'MISC1,FOOTER,INTRO';
}else{
OAS_listpos = 'TOP,FOOTER,INTRO';
}
OAS_query='Unknown+Terminal';
OAS_url='http://rmedia.boston.com/RealMedia/ads/';OAS_target='_top';OAS_version=10;OAS_rn='001234567890';OAS_rns='1234567890';OAS_rn=new String(Math.random());OAS_rns=OAS_rn.substring(2, 11);
function OAS_NORMAL(pos){document.writeln('<A HREF="'+OAS_url+'click_nx.ads/'+OAS_sitepage+'/1'+OAS_rns+'#'+OAS_listpos+'!'+ pos+'?'+OAS_query+'" TARGET='+OAS_target+'>');document.writeln('<IMG SRC="'+OAS_url+'adstream_nx.ads/'+OAS_sitepage+'/1'+OAS_rns+'#'+OAS_listpos+'!'+pos+'?'+OAS_query+'" BORDER=0></A>');}
//--></script><script language="JavaScript1.1"><!--
OAS_version=11;if((navigator.userAgent.indexOf('Mozilla/3')!=-1)||navigator.userAgent.indexOf('Mozilla/4.0 WebTV')!=-1){OAS_version=10;}if(OAS_version >= 11)document.writeln('<SCR'+'IPT LANGUAGE=JavaScript1.1 SRC="'+OAS_url+'adstream_mjx.ads/'+OAS_sitepage+'/1'+OAS_rns+'#'+OAS_listpos+'?'+OAS_query+'"> <\/SCRIPT>');
//--></script><script language="JavaScript"><!--
document.writeln('');
function OAS_AD(pos){if(OAS_version >= 11)OAS_RICH(pos);else OAS_NORMAL(pos);}
//-->
</script>
EDIT2: I also tried ChromeWebClient - but turns out it only adds support for JS methods like alert(), prompt(),etc. There is not much documentation except this but the OP seems to have accepted an answer regardless of whether it worked for them. Nevertheless, that solution didn't work for me.
Please check these lines of code
var agent=navigator.userAgent.toLowerCase();
if(is_iphone)
{
OAS_AD('MISC1'); } else {
OAS_AD('TOP');
}
Obviously in your case the agent is not "iphone" so the code executed is
OAS_AD('TOP');
It would be useful if you attach that code too...

Categories