how to know if it is really a mobile or not - javascript

I create a web page but I don't want it to be able to open in the computers browser. I only want it to be available for mobiles. I know that with user_agent is possible to know if it is a mobile or computer (I have it already working using .htaccess), but is it possible to have in the mobile view as computer or in the computer there is an option to veiw as mobile so even if I use user_agent is possible to view in a computer. Is there a better way to check if it is really a computer or a mobile?
If it is possible I want to restrict completely the option to open it in the computer.

If you use jsp to implement the web page you can use this code to find the client device is a mobile device:
boolean isMobile = false;
String ua = request.getHeader("User-Agent").toLowerCase();
if (ua.matches("(?i).*((android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino).*") || ua.substring(0, 4).matches("(?i)1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-")) {
isMobile = true;
}
this code will executed as a server side code.
You may want to check the client device in client side, you can use javascript as follow:
Detecting a mobile browser

As far as I am aware, there is no method that will be 100% accurate in detecting if the client is a mobile or not. You can check the user-agent, but the user-agent can be spoofed. You can rely on javascript to detect the screen size, but javascript is public and therefore you should always assume everyone knows everything about your javascript. You can be a bit sneakier with javascript and detect a certain thing that hasn't been implemented in mobile browsers yet, but works fine in desktop browsers and base your decision on that. In the end it doesn't matter: It can be spoofed.
The only thing that can't be spoofed is the remote ip-address. If you have a giant database with data about ip's used for mobile internet and 'other ips', you can base your decision on that. Most likely you'll need to use an external service for that, and that will be a significant performance hit.
Even then, what are you trying to achieve? If the user may not download something, why do you put it on the internet? If the security of your site depends on it, you are not approaching the problem in the right way. If the files are confidential, you should put a proper username/password or public/private key in place to protect them. Relying on slow/mobile internet to protect something is a bad idea.

http://matthewhudson.me/projects/device.js/
include device.js and
for example (js):
document.write("device.ios() === ", "<span class=\"" + device.ios() + "\">" + device.ios() + "</span>", "<br />");
document.write("device.iphone() === ", "<span class=\"" + device.iphone() + "\">" + device.iphone() + "</span>", "<br />");
document.write("device.ipod() === ", "<span class=\"" + device.ipod() + "\">" + device.ipod() + "</span>", "<br />");
document.write("device.ipad() === ", "<span class=\"" + device.ipad() + "\">" + device.ipad() + "</span>", "<br />");
document.write("device.android() === ", "<span class=\"" + device.android() + "\">" + device.android() + "</span>", "<br />");
document.write("device.androidPhone() === ", "<span class=\"" + device.androidPhone() + "\">" + device.androidPhone() + "</span>", "<br />");
document.write("device.androidTablet() === ", "<span class=\"" + device.androidTablet() + "\">" + device.androidTablet() + "</span>", "<br />");
document.write("device.blackberry() === ", "<span class=\"" + device.blackberry() + "\">" + device.blackberry() + "</span>", "<br />");
document.write("device.blackberryPhone() === ", "<span class=\"" + device.blackberryPhone() + "\">" + device.blackberryPhone() + "</span>", "<br />");
document.write("device.blackberryTablet() === ", "<span class=\"" + device.blackberryTablet() + "\">" + device.blackberryTablet() + "</span>", "<br />");
document.write("device.windows() === ", "<span class=\"" + device.windows() + "\">" + device.windows() + "</span>", "<br />");
document.write("device.windowsPhone() === ", "<span class=\"" + device.windowsPhone() + "\">" + device.windowsPhone() + "</span>", "<br />");
document.write("device.windowsTablet() === ", "<span class=\"" + device.windowsTablet() + "\">" + device.windowsTablet() + "</span>", "<br />");
document.write("device.fxos() === ", "<span class=\"" + device.fxos() + "\">" + device.fxos() + "</span>", "<br />");
document.write("device.fxosPhone() === ", "<span class=\"" + device.fxosPhone() + "\">" + device.fxosPhone() + "</span>", "<br />");
document.write("device.fxosTablet() === ", "<span class=\"" + device.fxosTablet() + "\">" + device.fxosTablet() + "</span>", "<br />");
document.write("device.mobile() === ", "<span class=\"" + device.mobile() + "\">" + device.mobile() + "</span>", "<br />");
document.write("device.tablet() === ", "<span class=\"" + device.tablet() + "\">" + device.tablet() + "</span>", "<br />");
document.write("device.portrait() === ", "<span class=\"" + device.portrait() + "\">" + device.portrait() + "</span>", "<br />");
document.write("device.landscape() === ", "<span class=\"" + device.landscape() + "\">" + device.landscape() + "</span>", "<br />");
css:
.true {
color: green;
font-weight: bold;
}

Related

loading image into view after ajax call

Here is the problem I ran into just now. I have a chat function part of my laravel application that loads respective users images as they type in the conversation. What I cannot figure out is when I append the url for the profile picture into the view, it will not actually display the picture, it just shows a "placeholder" of where the picture should be.
I know the code works for a fact because I can see in the console log the correct path for the picture inside the assets folder.
So my question is how would I display a picture after retrieving info from an ajax call.
$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img scr=" + data.profilePicture + " class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
Thank you for the help in advance!
$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img src='" + data.profilePicture + "' class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
src isn't spelt correctly, then notice the quotes after the src and the end of src also, try this out.
This is usually caused when you're in a route that does not represent the base URL properly.
You can use the asset() helper function to build the URL to your asset folder relative to the public directory on your server.
https://laravel.com/docs/5.3/helpers#method-asset

Javascript functions not working in Chrome browser after PostBack

I am facing a wiered issue with Chrome browser.
Its an online donation form.
User has a choice to contribute different amounts.
This form contains few radio buttons along with option to provide other donation amount also.
This form works fine in IE and firefox,
But not working properly on Chrome.
The issue seems to be happening only on a postback.
On postback javascript functions "selectAmount" and "selectOtherAmount" functions are not working.
Basically on click event of the radio buttons I am calling the above simple js functions.
Looks like Chrome is treating this as Cross Site Scripting and blocking.
In chrome debugger shows the following error on Postback.
"The XSS Auditor refused to execute a script in 'myform.aspx?id=12345'
because its source code was found within the request.
The auditor was enabled as the server sent neither an 'X-XSS-Protection not 'Content-Security-Policy' header."
here is my code
if (item[0] == "__OTHER__")
{
if (selectedValue == "__OTHER__")
{
amountLevels.Append("<tr><td><input type=\"radio\" name=\"levelamount-" + donationOption + "\" id=\"rbAmountOther-" + donationOption + "\" value=\"" + defaultOtherAmount.ToString("0.00") + "\" onclick=\"selectOtherAmount(this.value,'" + donationOption + "');\" checked=\"checked\" /></td>");
}
else
{
amountLevels.Append("<tr><td><input type=\"radio\" name=\"levelamount-" + donationOption + "\" id=\"rbAmountOther-" + donationOption + "\" value=\"" + defaultOtherAmount.ToString("0.00") + "\" onclick=\"selectOtherAmount(this.value,'" + donationOption + "'); \" /></td>");
}
amountLevels.Append("<td><input type=\"text\" id=\"txtAmountOther\" value=\"" + defaultOtherAmount.ToString("0.00") + "\" " + disabled + " onchange=\"selectOtherAmount(this.value,'" + donationOption + "');\" onkeypress=\"return isValidAmount(event);\" style=\"width:70px;\" />" + item[1] + "</td></tr>");
}
else if (string.Compare(selectedValue, item[0], true) == 0)
{
amountLevels.Append("<tr><td><input type=\"radio\" id=\"rdbAmount-" + donationOption + index + "\" name=\"levelamount-" + donationOption + "\" value=\"" + amount.ToString("0.00") + "\" checked=\"checked\" onclick=\"selectAmount(this.value,'" + donationOption + "');\"></td><td> " + amountLabel + "</td></tr>");
selectedAmount = amount.ToString("0.00");
}
else
{
amountLevels.Append("<tr><td><input type=\"radio\" id=\"rdbAmount-" + donationOption + index + "\" name=\"levelamount-" + donationOption + "\" value=\"" + amount.ToString("0.00") + "\" onclick=\"selectAmount(this.value,'" + donationOption + "');\"></td><td> " + amountLabel + "</td></tr>");
}
This "feature" can be disabled by sending the non-standard HTTP header X-XSS-Protection on the affected page.
X-XSS-Protection: 0
See this post: Refused to execute a JavaScript script. Source code of script found within request

How can this be modified to show 2 videos?

I found this code online that will show the most recent video from a Vimeo account...
$(function() {
$.getJSON('http://vimeo.com/api/v2/VIMEO-ACCOUNT-NAME/videos.json?callback=?', {format: "json"}, function(videoList) {
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[0].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent").innerHTML=videoProperties.html
document.getElementById("vimeoDescription").innerHTML="<p><a href='" + videoList[0].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
});
});
I'm trying to figure out how to get it to display the 2 most recent videos, instead of one. I tried to add another item to the array e.g. [0,1], but that just breaks the script.
Can anyone suggest how I could get this script to display 2 videos? Thanks!
Here's a non-functioning jsfiddle just to show the code more clearly.
You need to repeat the second getJSON for the second element using videoList[1].id, and inserting it into other divs
$(function() {
$.getJSON('http://vimeo.com/api/v2/VIMEO-ACCOUNT-NAME/videos.json?callback=?', {format: "json"}, function(videoList) {
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[0].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent").innerHTML=videoProperties.html
document.getElementById("vimeoDescription").innerHTML="<p><a href='" + videoList[0].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
//get second video (insert into another div)
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[1].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent2").innerHTML=videoProperties.html
document.getElementById("vimeoDescription2").innerHTML="<p><a href='" + videoList[1].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
});
});

Javascript innerHTML not allowing onClick on javascript function

I am not sure why, but the following
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'
seems to run automatically without the user clicking.
document.getElementById("shop-items").innerHTML += "<div class='product " + cssclass + "'><div class='product-images-smaller'><span class='shop-large-image'><img src='" + item.pictures[0] + "'/></span></div><h1>" + item.name + "</h1><div class='prodtext'><b>Status:</b> " + item.status + "<br><b>Price:</b> $" + item.price + "<br><a id='shop_" + item._id.$id + "' href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'><h3 id='dshop_" + item._id.$id + "' class='green_button'>Buy Now</h3></a></div></div>";
could anyone please tell me why.
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/'
I see a double quote , is it a typo, change to
href='javascript:'+ openextlink('http://www.ipetfindr.com/shop/product/'

Slimming down javascript code....Dynamic header on a static page with javascript

This element loads last and with delay on the page...
I've created a dynamic header with an external javascript file for my static html page.
I need help slimming down the code.
Also, to call the function, I call the body onLoad method. Any suggestions on how to call this EXTERNAL function before ALL the contents of the page loads?
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML =
"<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live Broadcasts & Webcasts" + "</a>" + "</span>"
+ "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>"
+ "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>"
+ "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>"
+ "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>"
+ "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>"
+ "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>"
+ "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>"
+ "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>"
+ "<br>"
+ "<span>" + "<a href='/health/' class='catnav'>" + "Health & Fitness" + "</a>" + "</span>"
+ "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>"
+ "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>"
+ "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>"
+ "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"
+ "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>"
+ "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science & Technology" + "</a>" + "</span>"
+ "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
+ "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"
document.getElementById("category_header").innerHTML = addHTML;
var getNav = document.getElementById("navtop").innerHTML;
var createNav =
"<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios & Offices" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"
document.getElementById("navtop").innerHTML = createNav;
}
ref: [badertv.com]
Step 1: Reduce Duplication (make a function which makes the span and a tags give a url and text.
Step 2: Use an array and loop for url and text.
function makeLink(url, text){
return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
out += makeLink(url[i],text[i]);
}
add any special cases and you're all set.
In both addHTML and createNav you have only one dynamic variable. Why the concatenation?
Addition:
You can just put the whole thing in a function and call it at after you close the parent tag for the element that will hold the content (you can set two function if the two strings are not for the same container).
The slimming down I guess could go like this, it will spare you a few bytes but I wonder if it is worth the effort. For the loading part: calling this in body onload is safe because it probably guarantees that the getElementbyId will work. If you put a script tag near the end of the </body> tag it might work also but on different browser the behavior might be different (aka broken).
function link(linkText) {
return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML,
linkTexts = [
["broadcast_webcast", "Live Broadcasts & Webcasts"],
["business", "Business"]
// etc
],
addHtml;
addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
addHtml.push(link(linkTexts[i]));
}
document.getElementById("category_header").innerHTML = addHtml.join("");
// rest of the code
}

Categories