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...
Related
First things first, I'm brand new to Javascript and Regex. I've only been dipping my toes in this past month. I've been trying to put together away to paste a url into a text input then automatically trim it down to just the host name and validate it before I'm able to push the button.
I've gotten it working a few different times but I keep running into the same issue: After a certain period of time, it simply stops working.
I've reformatted and cleaned up the code a few times (though, I'm sure it's still very sloppy because I'm new at this) and I can get it working again. But after an hour or so of working, it stops working. Reloading the page doesn't make a difference. Even restarting my computer doesn't make a difference. It simply stops working.
My only guess is that there must be something about the way I'm going about this which is causing it crash or stall out. Perhaps a formatting issue, perhaps the methodology altogether is flawed. I just don't know enough to be able to diagnose it yet.
Hopefully, some of you nice people would be able to point out my flaws or point me in the right direction of how to fix this. I've searched and I couldn't find anyone who was trying to do the things I'm doing all in one build (preparing to myself to be proved wrong here).
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<input id="notesUrlInput" type="text" placeholder="URL Goes here" pattern="^(?!www\.)[a-zA-Z0-9\-]+\.[a-zA-Z0-9]+$" autocomplete="off">
<button id="notesExecuteButton" disabled>Execute</button>
<span id="notesUrlOutput"></span>
<!------------------------------------------------------------------------------->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
(function () {
var timeout = null;
var notesUrlOutput = document.getElementById("notesUrlOutput");
var notesExecuteButton = document.getElementById("notesExecuteButton");
document.getElementById('notesUrlInput').addEventListener('keyup',
function (e) {
clearTimeout(timeout);
timeout = setTimeout(
function () {
rawInput = $('#notesUrlInput').val();
cleanInput = rawInput.replace('www.', '');
cleanInput = cleanInput.replace('http://', '');
cleanInput = cleanInput.replace('https://', '');
cleanInput = cleanInput.replace(/\/.*/,'');
$('#notesUrlInput').val(cleanInput);
if (cleanInput.value == "") {
notesUrlOutput.innerHTML = "";
notesExecuteButton.disabled = true; return false;
} else if(!notesUrlInput.checkValidity()) {
notesUrlOutput.innerHTML = "Invalid URL: Please provide a valid URL";
notesExecuteButton.disabled = true; return false;
} else {
notesUrlOutput.innerHTML = "Input OK";
notesExecuteButton.disabled = false; return false;
}
}, 400);
});
})();
</script>
</body>
</html>
Frustratingly, when I pasted this code in here and ran it, it worked. As soon as I opened the file I copied this from in my browser. It stopped working. I just don't understand it.
From your code it looks like you want to extract just the domain name from the input field.
You mix JavaScript DOM calls and jQuery, which is fine. It is usually easier to interact with the DOM using just jQuery. Here is your code rewritten in jQuery:
const cleanRegex = /^https?:\/\/(?:www\.)?(.*)\/.*$/;
const validRegex = /^[\w\-]+(\.[\w]+)+$/;
(function () {
$('#notesExecuteButton').prop('disabled', true);
$('#notesUrlInput').on('input', function(event) {
let val = $(this).val();
let cleaned = val.replace(cleanRegex, '$1');
$(this).val(cleaned);
if(!cleaned) {
$('#notesUrlOutput').text('');
$('#notesExecuteButton').prop('disabled', true);
} else if(!cleaned.match(validRegex)) {
$('#notesUrlOutput').text('Invalid URL: Please provide a valid URL');
$('#notesExecuteButton').prop('disabled', true);
} else {
$('#notesUrlOutput').text('Input OK');
$('#notesExecuteButton').prop('disabled', false);
}
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="notesUrlInput" />
<button id="notesExecuteButton" style="disabled: disabled;">Go</button>
<div id="notesUrlOutput"></div>
Explanation:
.on('input') - fires every time something changes in the input field- val.replace(cleanRegex, '$1') - clean up: strip protocol and www prefix, and URL path (any text after domain
cleaned.match(validRegex) - check validity of domain
.prop('disabled', true/false) - add/remove disable property
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);
The HTML code below works fine in IE 8, but not in FF 11. Although the code seems to take different browsers into account, for some reason FF does not do the trick. Can someone please tell me how to get this to work in both IE and FF? The idea is to rotate several clickable pictures.
<html>
<head>
</head>
<body>
<ilayer id='l1'>
<layer id='l2'>
<div id='l1'>
<div id='l3' style='position:relative'>
</div>
</div>
</layer>
</ilayer>
<script language='JavaScript'>
<!--
var bannerArray = new Array();
var myCount=0;
// Banner Code Assignment
bannerArray[0] = "<a href='http://www.google.com' target='_blank'><img src='image1.jpg' BORDER=0 height='50'/></a>";
bannerArray[1] = "<a href='http://www.google.com' target='_blank'><img src='image2.jpg' BORDER=0 height='50'/></a>";
bannerArray[2] = "<a href='http://www.google.com' target='_blank'><img src='image3.jpg' BORDER=0 height='50'/></a>";
bannerRotate();
function bannerRotate() {
if(myCount > bannerArray.length-1){myCount=0;}
// Write out rotation
if (document.all){ // it is IE
document.all.l3.innerHTML=bannerArray[myCount];
}
else if (document.layers){ // it is NN
document.layers.l1.document.layers.l2.document.open();
document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
document.layers.l1.document.layers.l2.document.close();
}
setTimeout('bannerRotate()', 1000);
myCount++;
}
// -->
</script>
</body>
</html>
You haven't specified a DOCTYPE.
This is an important part of a HTML document. Without it, IE see the HTML as invalid and render it in Quirks Mode. Other browsers won't.
When I is in Quirks mode, it is basically rendering the page as it would have done in IE5.
This is why you are seeing the page look different in IE vs FF. Firefox is actually rendering it correctly; it is IE that is wrong.
Add a valid DOCTYPE to make IE render it correctly. If you don't know which doctype to use, use this one:
<!DOCTYPE html>
This will make the page render the same in all browsers.
It will, however, be IE that changes, so if you think it's rendering fine in IE now, then you'll probably have to make some changes to your layout to fix it.
Hope that helps.
In addition, your Javascript code is very badly obsolete. You will need to consider rewriting all of that from scratch. Nobody uses document.all or document.layers any more. However, the doctype is the main thing that is making your page render incorrectly in the first instance.
document.all and document.layers are proprietary and obsolete. Use document.getElementById() instead.
Just replace if (document.all) with if (document) and it will work in Firefox.
It will, but no really, don't do that! That's based on some almighty hacks.
Where-ever you got that code from, stop using it NOW.
There's plenty of tutorials out on the web that will show you how to rotate the display of images in a modern fashion. Go and find one.
Lets bring this code into the 21st century, and don't forget the docype!!!!
HTML
<ul id="banner">
<li id="bannerItem1"><img src="http://placehold.it/450x150/FF0000/FFFFFF/&text=Image1" /></li>
<li id="bannerItem2"><img src="http://placehold.it/450x150/00FF00/FFFFFF&text=Image2" /></li>
<li id="bannerItem3"><img src="http://placehold.it/450x150/0000FF/FFFFFF&text=Image3" /></li>
</ul>
CSS
#banner
{
list-style:none; /*Turn Off List Styling */
}
#banner li
{
display:none; /*Hide the List Items*/
}
#banner li#bannerItem1
{
display:block;/*Show The First One */
}
Javascript
var listItems = document.getElementById("banner").getElementsByTagName("li");
var limiter = 0;//this is to stop it infinatly looping...optional
var activeNode = 0;
var t = setInterval(function(){bannerRotate()},1000);
function bannerRotate() {
var listItemsCount = listItems.length;
//LOOP THROUGH List Items
for(i = 0; i < listItemsCount; i++)
{
//Turn off all but next active node
if(i != activeNode +1)
{
listItems[i].style.display = "none";
}
//Check if next active node is outside the list range
else if((activeNode + 1) < listItemsCount)
{
listItems[activeNode +1].style.display = "block"
}
}
activeNode++;
if(activeNode >= listItemsCount)
{
listItems[0].style.display = "block";
activeNode = 0;
}
if(limiter++ > 4)
{
clearInterval(t);
}
}
Example: http://jsfiddle.net/Hj78T/
Trying to figure out a way to use Javascript to set up a little if-else statement using only part of the url to determine if a link should go one place or another. So far what I got is,
<script type="text/javascript">
if (url.indexOf("example.com/") != -1)
{
Blahblah
} else {
Blahblah
}
</script>
The problem is that the link doesn't even appear so I don't know how wrong or not I am.
Thanks for any help.
Edit: Lets just say for the sake of argument it is a blank html page. As in <html>
<body>
</body>
</html>
Looking for more of a proof of concept then branch out into getting this working on a full scale site.
Edit #2:
Figured it out, even has url detection.
<a id="link">link</a>
<script type="text/javascript">
var link = document.getElementById('link');
var referrerUrl = document.referrer;
if (referrerUrl.indexOf("searchurlfor") != -1)
{
link.href = "place1";
} else {
link.href = "place2";
}
</script>
Try not mixing HTML and JavaScript:
<a id="someLink" target="_blank">Blahblah</a>
<script>
document.getElementById('someLink').href =
(url.indexOf("example.com/") != -1)? 'placeone.htm' : 'placetwo.htm'
</script>
or more verbosely:
<script>
var linkElem = document.getElementById('someLink');
if(url.indexOf("example.com/") != -1) {
linkElem.href = 'placeone.htm';
} else {
linkElem.href = 'placetwo.htm';
}
</script>
Preferably the script should go to a separate file. The way you suggest feels like PHP or JSP but JavaScript does not work this way. In the example above you first render empty link and change the href attribute afterwards.
I think you want:
<script>
if (url.indexOf("example.com/") != -1)
{
document.write('Blahblah');
} else {
document.write('Blahblah');
}
</script>
You need getElementById
HTML:
<a id="link">link</a>
Javascript
<script type="text/javascript">
var link = document.getElementById('link');
if (url.indexOf("example.com/") != -1)
{
link.href="placeone.com";
} else {
link.href="placetwo.com";
}
</script>
You'd have to show us where/when this code is executing in your page. You can't just drop HTML into the middle of a piece of javascript like you were doing.
You can call:
document.write('Blahblah');
to insert HTML into the current place in the document if this is an inline script.
If this code is not executing inline in the document, then you should not use document.write() as that will clear your document and start a new one. Instead, you would use DOM manipulation functions to insert this into the appropriate place in the page or to change the href on an existing link. For example to change the href on an existing link when you have this HTML:
<a id="myLink" href="placeone.com" target="_blank">Blahblah</a>
You would use this javascript that must run after the page has been loaded:
var link = document.getElementById("myLink");
(url.indexOf("example.com/") != -1) {
link.href = "placeone.com";
} else {
link.href = "placetwo.com";
}
Jquery or JavaScript that displays content based on specifics date period
so we have like 3 dates
12/3/2010
12/11/2010
12/20/2010
and
Div Contents
Content 1 should be displaying from 12/3 to 12/11
Content 2 should be display from 12/11 to 12/20
and Content 3 should be displaying from 12/20 there after
First, like others said this whole thing is bad idea as you're depending on the client machine date/time and correct approach would be doing that in server side.
Anyway, guess you have your reasons so here is jQuery solution.
Have such HTML:
<div class="DateDiv"><span class="DateRange">1/1/2010 to 1/1/2011</span>I'll be visible during 2010</div>
<div class="DateDiv"><span class="DateRange">1/1/2011 to 1/1/2012</span>I'll be visible during 2011</div>
<div class="DateDiv"><span class="DateRange">1/1/2012 to 1/1/2013</span>I'll be visible during 2012</div>
Put the date range inside a span inside each div with the class "DateRange".
Next, have such CSS to have them initially hidden:
<style type="text/css">
.DateRange, .DateDiv { display: none; }
</style>
And finally, this script: (jQuery)
<script type="text/JavaScript">
$(function() {
$(".DateDiv").each(function(index) {
var sRange = $(this).find(".DateRange").html();
var arrTemp = sRange.split(" to ");
var dtFrom = new Date(arrTemp[0]);
var dtTo = new Date(arrTemp[1]);
var dtNow = new Date();
if (dtNow >= dtFrom && dtNow <= dtTo)
$(this).show();
});
});
</script>
Test case is available here feel free to mess around with it: http://jsfiddle.net/2BHLd/
I've created a simple code. It should work as you want (if I have understood you well).
I know, there's no doctype in my HTML and there are some missing tags. The HTML I've provided is just a kind of template.
<html>
<head>
<script type="text/javascript">
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate(); // fixed
function SetDivContent() {
var div=document.getElementById('date_dependent');
if (year==2010 && month==11) { // fixed (the JavaScript months order is 0-11, not 1-12)
if (day>=3 && day<11) { // the following content will be displayed 12/03/2010, 12/04/2010, [...], 12/09/2010, 12/10/2010
div.innerHTML='content 1';
}
else if (day==11 || day==12) { // this one will be displayed 12/11/2010 and 12/12/2010
div.innerHTML='content 2';
}
else if (day>12) { // this one - 12/13/2010 and later, until the end of December
div.innerHTML='content 3';
}
}
else if (year==2011 && month>=0) div.innerHTML='content 3'; // OPTIONAL - just to ensure that content 3 is displayed even after December.
}
</script>
</head>
<body onload="SetDivContent()">
<div id="date_dependent"></div>
</body>
</html>
Please note that if you want to hide some data from users if the specified date hasn't come yet, you should better use something server-side for security reasons. Otherwise, any user may just read the page's source. Also remember that the following code is executed when the body is loaded, i.e. each time a user refreshes the page.
EDIT: Warning: there were two bad lines (I've made a mistake before). Anyway, I've fixed them. The current code works, I've tested it.