I using Benalman JS to control the back button window redirect url to home.
I tested in normal browser and Android phone, it work accordingly.
But it does not work in Ipad,
here is a part of the code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script>
// control back button
// includes in js mean contains
if(!window.location.href.includes('#state')){
history.pushState(null ,document.title, '#state'); // forwards
}
// Bind an event handler.
jQuery(window).bind('hashchange', function(e) {
window.location = _contextPath + "/home/";
});
</script>
</html>
I notice that in Ipad the url will not append the "#state".
I suspect history.pushState not work in Ipad.
How can I fix this?
Thank you
The problem fixed after I change
includes
To
indexOf
Nothing to do with Benalman Js library. This js can excluded.
Thank you.
Related
on desktop, the site I made works perfectly, however on mobile, the page constantly refreshes not allowing the user to view any of the content. I was having difficulty making my site responsive, so I made a new file called mobile.html to show all of the content properly. When the screen is a certain size, the site redirects to the mobile.html. Here is the code I believe is producing the issue.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=1500px, maximum-scale=1.0" />
<script type="text/javascript">
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
document.location = "mobile.html";
}
</script>
How can I fix this issue?
Appreciate any help,
Thanks
First of all check mobile.html and make sure you don't have your forwarding code.
Alternatively you can check current page is not mobile.html.
You can use the code below this will put more control on your page.
First check if userAgent is mobile and then check if current page is not mobile.html if both true this means user is connecting from a mobile device but not viewing mobile page so forward to mobile page.
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var mobilePage = 'mobile.html';
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) && filename !== mobilePage ) {
document.location = mobilePage;
}
Try this code...
<script type="text/javascript">
if (document.location == "example.com/mobile.html") {
//do nothing
}
else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
document.location = "mobile.html";
}
</script>
Below is my piece of code that work's in all the browser in all the OS, except ipad chrome. Help me out here.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
function myprint() {
const wnd = window.open('about:blank', '', '_blank, alwaysRaised=yes');
wnd.document.write('<html><head><title></title>');
wnd.document.write('</head><body>');
wnd.document.write('<div>JavaScript often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.</div>');
wnd.document.write('<div class="print-header"><button title="Print" onclick="window.print()">Print</button></div>');
wnd.document.write('</body></html>');
wnd.document.close();
}
</script>
<body>
<button onclick="myprint()">popup</button>
</body>
</html>
Here Im trying to open my content using window.open() then print them using window.print(). That's all. jsfiddle
This link also not working in ipad chrome.
Print
This is an issue with Chrome on iOS. Because of Apple’s policy on third party browsers, Chrome is actually just a WebView component. Printing is currently not supported. As far as I am aware, there is currently no workaround for this issue.
Try this code, if it not works another solution is to use a third-party printing service like this: http://www.printfriendly.com
function goPrint(){
window.print();
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
window.location.reload();
}
}
You are using a backtick character ` in this line:
wnd.document.write(`<div class="print-header"><button title="Print" onclick="window.print()">Print</button></div>`);
This is a Templated literal and might not be supported. Try replacing it with a single quote:
wnd.document.write('<div class="print-header"><button title="Print" onclick="window.print()">Print</button></div>');
In Chrome you can set the color of a tab with the meta tag:
<meta name="theme-color" content="#FFA000">
In my website, I have several sections color-coded. To make it look better, I would like to dynamically change the tab's color according to the currently opened section. I have tried doing it with jQuery:
$("meta[name='theme-color']").attr('content', '#455A64');
But it doesn't work. I would be very glad if someone can tell me if/how you can change this meta value during runtime.
Edit: After some checks I noticed that the code does change the meta tag content, but Chrome doesn't update the tab color.
For this who land on this page from Google looking for a vanilla JS solution:
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');
Your jQuery code is correct. If you want to flicker the title bar and drive your users off, try this:
<!DOCTYPE html>
<html>
<head>
<title>Unicorns!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="theme-color" content="#FF0000">
</head>
<body>
<h1>Unicorns are <b id="x">#FF0000</b></h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var i = 0;
var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF"];
setInterval(function() {
var color = colors[i = i++ > 4 ? 0 : i];
$("meta[name='theme-color']").attr('content', color);
$("#x").text(color);
}, 500);
});
</script>
</body>
</html>
I've tested this on my Nexus 5 with Chrome 40.0.2214.89 and Android version 5.1.1, and seen it work. Not sure what to think of this type of feature yet though... :P
Not all fiddle tools will allow you to show the effect though, because I think use of iframes may prevent you from reproducing it properly. I've found that Plnkr did work though. Visiting this demo Plnkr showed the effect on abovementioned device.
Turns out, it doesn't work with android Chrome versions 43.x & 44.x. In other versions all the Code above works. In version 45.x it even fades from one color to the other, making it look really cool!
This is potentially a somewhat oddly specific question.
The situation:
I have a page with a position:fixed modal dialog (actually several, but that's irrelevant to the problem, as far as I've been able to determine). The modal opens when clicking a certain link. A script listens for hashchange events in order to close the modal when the user hits the back button.
The expected behaviour is that when back:ing out of the dialog, the page returns to the scroll position where it was before opening the modal. This happens in nearly every modern browser I've tested (desktop FF, Chrome, IE9/10/11 and Safari, and Chrome for Android).
On iPhone/mobile Safari, the page instead scrolls back to the top.
Test code
This is as reduced as I've been able to make it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html, charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal test</title>
</head>
<body>
<h1>Header</h1>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<h1>Header</h1>
<p>Open popup</p>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<div id="#popup" style="background:#fff; width:300px; height:100px; border:2px solid #000; position:fixed; top:50px; left:50px; display:none">
Modal dialog.<br>
Hitting 'back' should close this modal.<br><br>
Close modal
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.js-close-popup').click(function(ev){
window.history.back();
return false;
});
$('.js-open-popup').click(function(ev){
$('#\\#popup').fadeIn(400);
});
});
$(window).on('hashchange', function(){
hash = window.location.hash.replace('#','');
if(hash == '' || hash.lastIndexOf('#', 0) !== 0){
$('#\\#popup').fadeOut(400);
}
});
})(jQuery);
</script>
</body>
</html>
What I want to do is kill the scroll-to-top on iPhones, if at all possible without changing too much of the back-button logic for the popups (or breaking something in any other browsers).
I've searched SO for X number of hours but haven't been able to find a mention of this particular problem, or indeed a solution that works. Feel free to slap me on the fingers and point me in the right direction if I've missed an existing thread that answers my question.
EDIT: To clarify, opening the popup works as expected and does not cause any "auto-scroll".
This is definitely related to having "#" for "a href" value in your code. Also, I see a "##" in your code for a name of the ID, which i believe the reason for this. Try using some other name convention. When you are writing ID's, you don't need to give "#" in the HTML code. Try working on these lines, it might work for you.
Thanks!!
Have stumbled upon what seems to be a bug with how mobile safari renders the cursor when a window.scrollTo() is executed while a user is entering text into a textarea. Have attached source code which illustrates the issue. I'm wondering if anyone has any advice on how I might work around this.
The issue: If a user is entering text into a textarea and a window.scrollTo() is executed, the cursor remains rendered at the position the textarea used to be, not at it's current position.
To recreate: Load the following web page using mobile safari. Touch the textarea, which will open the keyboard. Type a couple of characters and wait. As text is added dynamically to the page, and the window scrolled, you'll see the cursor artifact
Have tried setting the focus() back to the textarea after the scroll, but that doesn't seem to have any effect.
Thanks!
<html>
<head>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css" media="screen">
textarea {
margin-top:50px;
}
</style>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', function() {
setTimeout(addContent,5000);
}, false);
function addContent() {
var elem = document.createElement('p');
elem.appendChild(document.createTextNode('Some new text'))
document.getElementById('newContentContainer').appendChild(elem);
window.scrollTo(0,20);
setTimeout(addContent,5000);
}
</script>
</head>
<body>
<div id="newContentContainer"></div>
<div>
<textarea></textarea>
</div>
</body>
</html>
Here's a photo which shows the problem:
I'm pretty sure this may solve the problem, and most likely will also make the on-screen keyboard flash off and back on for a tiny bit too. Call this code after you use scrollTo():
yourTextArea.blur();
yourTextArea.focus();