I am trying to add a smart app banner for users viewing through their mobile browser. I've been looking at some examples that use Javascript/CSS to work with other browsers besides Safari.
However, just dealing with Safari and iOS 6, when I add the meta tag for the smart app banner, it is displayed but cut half way off at the top of the page.
Here is a screenshot of what I'm talking about:
http://i6.photobucket.com/albums/y201/WNxFiveStarKiller/ScreenShot2014-02-27at115725AM.png
I've tried adding Javascript which scrolls to the top of the page like this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
But that doesn't do the trick, seems like it thinks the top of the page is where it initially loads.
Any ideas how to get around this? Thanks!
This meta tag placed in the head tag of you're HTML page should work:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
I would generally stay away from sliding the page up and down manually because the smart app banner usually slides down the whole page after the page has finished loading.
Related
I'm setting up a website www.bytework.dk.
I've added the viewport meta tag, which usually always works fine for me, so the site looks right on smartphones. But for some reason, this site ignores it completely and the site is zoomed out to full size on mobile.
I've checked all the javascript code, I've checked the CSS. I have no idea why the hell it has no function?
Whatever settings I try with the viewport meta tag it has absolutely no effect on the appearance of the page on a smartphone???
This is the code I'm using:
<meta name="viewport" content="width=device-width, initial-scale=1">
EDIT: Seems the problem is related to some dns settings on the domain provider I'm using and the shitty solution they made.
try to open it in an incognito window (if you're using Google Chrome) and see if that's still happening or clean up your cache, restart your browser and try again.
I am having a huge problem. I need to prevent access to non javascript users for a page on my website. I am not very technical when it comes to websites, hmtl or java ect. But I have a page that i would like non javascript users to not be able to access. I have tried lots of code from here in my header and footer such as
<noscript>
<meta http-equiv="refresh" content="0; URL=nojs/index.php">
</noscript>
but it does not work.
To put this into more detail my problem is that a host a webpage with a list of download links. There is an app (web browser) for amazon devices (android) that accesses webpages and allows you to download but it comes with javascript disabled by default.
This means that my Ads dont show and i am now getting 40TB a month bandwidth usage from people using this software which means i may have to pull the site soon as it costs more to run than the ads give back.
I think i need to either block non javascript users. Or is there a way i can make my links on that page in javascript so that none javascript users cant see or use them?
In an ideal world i would just like to display a message saying please enable javascript in settings but i have tried many header codes with no success. Any help here greatly appreciated
I tried using the meta tag inside the noscript tags like you did, and it worked fine for me. Try using an absolute link to your nojs page instead of the relative one you have. I don't know of a way to completely block nonjs users. Another option would be to use the noscript tags to hide the content of your html pages when js is disabled. This won't completely disable nonjs users from seeing your pages since if they are tech-savy they could use inspect-element to unhide the page content, but for the most part it should do a good job of preventing nonjs users from viewing your page. You can also include a no script alert. For example:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<noscript>
<style>
div.content {
display: none;
}
</style>
</noscript>
</head>
<body>
<noscript>
Please enable Javascript to view this Page
</noscript>
<div class=content>
Page Content Here
</div>
</body>
</html>
I want all my webpages to open at a specific scroll point (scrolled to, let's say, 300px).
I don't want this kind of Javascript solution <body onLoad="window.scroll(0, 150)"> because it's really annoying for the users. In effect, it scrolls only when the page is loaded which means sometimes (if the page loads slowly) it might scrolls many seconds after the page is opened, when the user already started reading the content.
I dont want to change my urls, like in this CSS solution mywebsite.com#scrolldiv
Actually the CSS solution mywebsite.com#scrolldiv works like charm, but it changes my urls, which i don't want.
Is there a way to use the Javascript solution and scroll BEFORE the page is loaded and the content is displayed? I don't want the users to see the annoying automatic scrolling.
Is there a way to use the CSS solution without changing the URLS?
this solution works for your requirements,
the user won't have to wait for load, and there is no url change required:
https://stackoverflow.com/a/22764622/2423221
Just put the script at the end of the html file. Then it will be called as soon as the dom is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- other content
(__)
(oo)
/------\/
/ | ||
* /\---/\
~~ ~~
/other content -->
<script type="text/javascript">
window.scrollTo(0,150);
</script>
</body>
</html>
I want to remove the title bar in my HTML/JS application/responsive site. The site is mainly responsive but is a one-page app. However, I want to remove the header bar on mobile and iPad.
I am already using:
window.scrollTo(0,0);
which works for the iPhone but not the iPad. From the readings I have done it seems that its possible to add some HTML head tags that make this possible when the page is added to the homescreen of the iPad? Is this true and if so what are the headers?
This has been answered here: Hide address bar in iPad
It'll only be possible if the user adds a bookmark of your web app to the home screen and you have the following meta tag in your <head>:
<meta name="apple-mobile-web-app-capable" content="yes" />
My portfolio site has links to different pages that load in an IFrame to the right. I want the pages to always load at the top -- therefore added this code in the head tag of the child pages:
<head>
<script type='text/javascript'>
parent.document.body.scrollTop = 0;
</script>
</head>
It works in Safari but not Firefox or Chrome.... What will work in all browsers?
Thanks!