Below is the function for hiding the address bar on a mobile for Safari, but how would build some additional logic that this function ONLY is initiated when there is no # in the URl present. Because when there is a # it needs to move to the anchor link.
So, when i have http://www.mymobilesite.com/index.html#start below function don't need to run.
<script type="text/javascript">
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
Thanks in advance!
Marcellino
Test for presence of hash:
if(!window.location.hash)
http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/
Related
Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
I have joomla website that is one page template. On the main page when user logs in for the very first time, it looks like there is no more content Downward.
I want to indicate on the top saying the message that "Please scroll down for more content".
Is there any way to indicate that msg is shown on top and when user scrolls down, it gets hidden????
There are all sorts of ways of doing this, here's one possibility: http://jsfiddle.net/panchroma/79mwymc5/
Good luck!
HTML
<div class="scroll-down">Please scroll down for more content</div>
JS
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we hide message
if ($(this).scrollTop() < 100) {
$('.scroll-down').fadeIn();
} else {
$('.scroll-down').fadeOut();
}
});
});
});
}(jQuery));
Have anyone faced the same problem? I'm using iron router with template-level subscription.
For example. I have a long page "list of items" where I can scroll down. Then I click on one of the items somewhere at the bottom and next template renders lower than it should be.
Imagine that you search on youtube, scroll down results and then you click on a video snippet but it opens not from the top but lower so you need to scroll back to top to see the video.
I've tried to put "scroll to top" script into onRendered callback but this "jump" is recognizable with a naked eye. So it become even worse.
(update) I've found this solution for now:
Router.onBeforeAction(function() {
$(window).scrollTop(0);
this.next();
});
If you are using FlowRouter, you can easily add this on a triggersEnter route definition:
const publicRoutes = FlowRouter.group({
name: 'public',
triggersEnter: [() => {
window.scrollTo(0, 0);
}],
});
You should try this
meteor add okgrow:iron-router-autoscroll
Reference: https://github.com/okgrow/iron-router-autoscroll
Try throwing this into your code and if your using React throw it in the componentDidMount() function
window.scrollTo(0, 0);
Could you please let me know how to detect any browser back button click using java script or jquery?
I am using the below :
if(window.history && window.history.pushState){
window.history.pushState({page:this.href}, null, 'this.href');
$(window).on('popstate', function() {
event.preventDefault();
$('#releaseLicenseApp').modal();
});
}
but it is not working in chrome and ie and firefox.
As you mentioned in the comments, you only want to notify the user that there are unsaved changes when he tries to leave the page. This can be done using onbeforeunload:
window.onbeforeunload = function(){
return 'Please save your changes before navigating to other page, if you continue then your unsaved data will be lost.';
};
Please try this on , it's working on chrome, ie and firfox
<script type="text/javascript">
window.history.forward();
function noBack()
{
window.history.forward();
}
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.