Remove the url search bar from android/iphone

Remove the url search bar from android/iphone - javascript

I have got a table, on a page:
<table border="0" width="320px" height="480px" style="background-color: black;">
UPDATE:
I want to remove the search bar above... so this is all I used for the adaptation for the mobile:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title></title>
<style type="text/css">
body{
margin:0px;
padding: 0px;
}
</style>
<script>
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</head>
I still can see one inch of the navigation bar..but I am trying to remove that one inch but cant

try using media queries for different css rules based by orientation:
/* i assume portrait to be the starting point */
.element{
rule:value;
}
#media (orientation: landscape) {
.element{
rule:different value;
}
}
but consider designing something more responsive perhaps

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Your <?php echo $app_name; ?> </title>
<style type="text/css">
body{
margin:0px;
padding: 0px;
}
/* i assume portrait to be the starting point */
</style>
<script>
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
var preventDefault = function(e) {
e.preventDefault();
return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);
</script>
</head>
Thats what I wanted.. no navigation , and disable all events

as to hiding the navigation bar, scrolling the page to 0 will only work if you have enough height to your page to fill the remaining space.
I sometimes use javascript to rezise and resize back, before and after the scrolling,
function scrollWinToTop () {
document.body.style.height = (window.innerHeight *1.5) + 'px'; //a lot of pixels or a large precentage
window.scrollTo(0, 1); // moves the viewport to the top
document.body.style.height = 'auto'; // OR clientHeight + 'px' OR something
}

This site also has a few other suggestions, but this no-nonsense, no-worry one is available in a github:gist and answers your question (pasted here for convenience):
function hideAddressBar()
{
if(!window.location.hash)
{
if(document.height < window.outerHeight)
{
document.body.style.height = (window.outerHeight + 50) + 'px';
}
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
}
}
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
As far as I can tell, the combination of extra height added to the page (which caused problems for you) and the scrollTo() statement make the address bar disappear.
From the same site the 'simplest' solution to hiding the address bar is using the scrollTo() method:
window.addEventListener("load", function() { window.scrollTo(0, 1); });
This will hide the address bar until the user scrolls.
This site places the same method inside a timeout function (the justification is not explained, but it claims the code doesn't work well without it):
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});

Related

How to make a tooltip with the same look and feel as when we add "title" attribute to an element?

I am trying to replicate the look and feel of the tooltip when we add the "title" attribute to an element.
Tooltip should be hovarable
Tooltip should be dismissable by pressing the Esc key
Currently, my custom tooltip is not hoverable. Also the look and feel is not matched with - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title
Any help is really appreciated and thanks in advance
const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");
tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
tooltipText.addEventListener("keydown", dismissTooltip);
function showTooltip() {
tooltipText.style.visibility = "visible";
}
function hideTooltip() {
tooltipText.style.visibility = "hidden";
}
function dismissTooltip(event) {
if (event.keyCode === 27) {
tooltipText.style.visibility = "hidden";
}
}
.tooltip-text {
visibility: hidden;
position: absolute;
background-color: #000;
color: #fff;
padding: 4px;
z-index: 1;
}
.tooltip-trigger{
cursor: pointer;
}
.tooltip-trigger:hover .tooltip-text {
visibility: visible;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Tooltip</title>
</head>
<body>
<span class="tooltip-trigger" aria-describedby="tooltip-text"
>Hover over me</span
>
<div id="tooltip-text" class="tooltip-text" role="tooltip">
This is the tooltip text
</div>
<script src="script.js"></script>
</body>
</html>

const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");
let timeout = null;
tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
window.addEventListener("keydown", dismissTooltip);
function showTooltip(event) {
timeout = setTimeout(() => {
tooltipText.style.visibility = "visible";
tooltipText.style.left = `${event.clientX}px`
tooltipText.style.top = `${event.clientY}px`
}, 1000)
}
function hideTooltip() {
clearTimeout(timeout);
timeout = null;
tooltipText.style.visibility = "hidden";
}
function dismissTooltip(event) {
if (event.key === 'Escape') {
tooltipText.style.visibility = "hidden";
}
}
.tooltip-text {
visibility: hidden;
position: absolute;
background-color: #000;
color: #fff;
padding: 4px;
z-index: 1;
}
.tooltip-trigger {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Tooltip</title>
</head>
<body>
<span class="tooltip-trigger" aria-describedby="tooltip-text">Hover over me</span
>
<div id="tooltip-text" class="tooltip-text" role="tooltip">
This is the tooltip text
</div>
<script src="script.js"></script>
</body>
</html>

The ultimate answer is in fact, you can't.
You can't replicate the exact behavior of a tooltip generated by a title attribute, simply because their appearance and behavior can be dramatically different across browsers, devices and OS.
You can certainly try to approach very close what it looks like on a particular browser/device/OS, but won't probably be able to replicate exactly everything everywhere. Note that doing user agent detection to finetune is most often a bad idea.

How to move React dialog to top of the body using Onclick

I have a share-dialog which I want to move when a user will click over it. Here in my case I have a multiple dialog box which can populate and want it to move with id associated with this dialog.
I have tried with some solution here as well but getting some error on the process any help/suggestion what I am doing wrong.
//dialog
<div className="share-request-dialog" onClick={this.onClick(participant.id)}>
<div className="alert-dialog-container">
<---- dialog body --->
</div>
</div>
//So far tried with this onClick function with both style.top and others as well
onClick = (partId, e) => {
var divClass = '.share-request-dialog'+partId;
// eslint-disable-next-line no-restricted-globals
let Y = scrollY;
debugger
// partId[0].style.top = e.clientY + 'px';
divClass.offset().top = Y + 'px';
console.log("Div is clicked" + partId);
}
/Errors
TypeError: divClass.offset is not a function
//basic design (Screen can be open mutiple over each other so want to move each one on to top of the screen on click over it)

Updated Answer
I notice your code is written in React, you need to look into simply toggling the CSS class to one which has left and top 0 that is positioned absolutely.
OR you can simply set the div style top to zero like below - Non React code
If you want the dialog to float on top of others - simply use a z-index:<high value> to ensure they are the topmost from a stacking order.
<!DOCTYPE html>
<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" />
<style>
.share-request-dialog {
background: blue;
border: 1px solid red;
height: 25px;
top: 300px;
position: absolute;
}
</style>
<title>Static Template</title>
<script>
const getOffset = (partId) => {
// eslint-disable-next-line no-restricted-globals
// partId[0].style.top = e.clientY + 'px';
event.target.style.top = 0 + "px";
console.log("Div is clicked" + partId);
};
</script>
</head>
<body>
<div class="share-request-dialog" onClick="javascript:getOffset(5)">
<div class="alert-dialog-container">
<---- dialog body ---> ss
</div>
</div>
</body>
</html>
https://codesandbox.io/s/zen-agnesi-rybp4?file=/index.html

Why isn't my Parallax scrolling JavaScript code working?

I started designing my own site and followed a YouTube video tutorial on how to code Motion Parallax scrolling on Dreamweaver using JavaScript and CSS so I followed the video and did everything it told me to but my code is still not working?
https://www.youtube.com/watch?v=cF3oyFXjRWk
I feel like my JavaScript code is not linked or something because some of the syntax or variables that are highlighted in a specific color on the video are not highlighted for me. What could my problem be?
I put the JavaScript within the head tag as well... this is the .js code
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
This is all my code with the css as well....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../Tezel's Website/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image{
position: relative;
z-index: -1
}
#content{
height: 750px;
width: 100%;
margin-top: -10px;
background-color:#4dbbac;
position: relative;
z-index: 1;
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</head>
<body>
<img id = "background" src = "sky1.jpg" width = "100%" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
<div class = "main">
<div id = "container">
<div class = "header">
<div id = "content">
</div>
</div>
</div>
</div>
</body>
</html>

This is not looking quite charming:
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
Check if all resources are loaded. Right click and check element or inspect element in your browser. Make sure all resources are found and loaded.

jQuery context is null + IE bug not showing contact/bio boxes

I found an open-source code that was perfect for my husbands website. I changed it to our liking, but it keeps giving an annoying error in the console:
Unable to get property "ownerDocument" of undefined of null reference.
In Firefox it says simply: TypeError: context is null
the error is supposedly here: jquery-1.10.2.js, line 1822 character 2
Sizzle.contains = function( context, elem ) {
// Set document vars if needed
if ( ( context.ownerDocument || context ) !== document ) {
setDocument( context );
}
return contains( context, elem );
};
I think I am doing something wrong in my code, but I can't seem to say where.
Also there is a weird IE error: The contact and bio page dissappear, when I open the menu, it is there, but it only comes foreward when I select that part of the page, and then it dissappears. I don't know if it is anything to do with the above error.
It works fine on Safari, Firefox, Chrome, but most of the visitors use IE.
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Franklin Cando - Photographe</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Franklin Cando - Photographe" />
<meta name="keywords" content=""/>
<!--I added this as a test, since I saw somewhere that this could help-->
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<link rel="shortcut icon" href="/images/icons/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span,p,h1',{
textShadow: '0px 0px 1px #ffffff'
});
</script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m)
{
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},
i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-44223947-1', 'franklincando.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="st_main" class="st_main">
<img src="images/album/AK9A4519.jpg" alt="" class="st_preview" id="bigImage"
style="display:none;"/>
<div class="st_overlay"></div>
<h1>
<a class="titelLink" href="http://www.franklincando.com/">Franklin Cando</a>
</h1>
<div id="st_loading" class="st_loading"><span>Loading...</span></div>
<ul id="st_nav" class="st_navigation">
<li>
<span class="st_link">Biographie<span class="st_arrow_down"></span></span>
<div class="st_about st_thumbs_wrapper">
<div class="st_subcontent">
<table>
<!--CONTENT-->
</table>
</div>
</div>
</li>
<li>
<span class="st_link">Contact<span class="st_arrow_down"></span></span>
<div class="st_about st_thumbs_wrapper" id="form_div_parent">
<div class="st_subcontent" id="form_div_child">
<div class="contactinfo" id="contactinfo_div">
<h3>Contact</h3><br/>
<!--CONTENT-->
<form id="contactForm" method="post" action="php/send_form.php" >
<!--CONTENT-->
<input class="button" type="button" onclick="validateForm()"
value="Envoyer"/>
<input class="button" type="reset" onclick="resetForm()"
value="Effacer"/>
</form>
</div>
</div>
</li>
<li class="album">
<span class="st_link">Photos<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper" id="wrapper">
<div class="st_thumbs" id="thumbs">
<!--IMAGES-->
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
JQUERY-JS
<script type="text/javascript">
$(document).ready(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//the facebook button - iris
var $fb = $('#fb');
$fb.hide();
//let's load the current image and just then display the navigation menu
$('<img>').load(function(){
$loader.hide();
if ($currImage.width() > $currImage.height()){
$currImage.css({"width":"100%"});
}
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
$fb.show();
},1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element where the thumbs are going to be
displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current opened menu (if any)
$(document).on('click','.st_arrow_down',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show();
});
$(document).on('click','.st_arrow_up',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//clicking on a thumb, replaces the large image
$(document).on('click','.st_thumbs img',function(){
var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
if ($this.width() > $this.height()){
$this.css({"width":"100%"});
}
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//hide image menu upon mouse out - iris
$list.find('.st_thumbs').bind('mouseleave',function(){
hideThumbs();
});
//function to hide the current opened menu //.css({"display":"none"}) // to hide
the bigger text boxes - iris
function hideThumbs(){
$list.find('li.current').animate({'height':'50px'},400,
function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide()
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//makes the thumbs div scrollable on mouse move the div scrolls automatically
function makeScrollable($outer, $inner){
var extra = 800;
//Get menu width
var divWidth = $outer.width();
//Remove scrollbars
$outer.css({overflow:'hidden'});
//Find last image in container
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft
+ lastElem.outerWidth() + 2*extra;
var left = (e.pageX - $outer.offset().left)
* (containerWidth-divWidth) / divWidth -
extra;
$outer.scrollLeft(left);
});
}
});
</script>
The website: www.franklincando.com
PS: really sorry about indentation. I spent a lot of time making it right in this post, and upon posting it still doesn't look like it is supposed to. I hope it is still clear.

The issue is here:
$(document)
/* ... */
.bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
In this case, this is the document. You can't animate the opacity of the document. Change it to body instead and it should be fine.
$("body").bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});

I ended up rebuilding the project. The base code I was using was for an older version of jQuery and I added the newest libraries. I think the code clashed on that. Working fine now.

Swipe images in phoneap + jquery issue

I am building a phonegap app using javacsript and jquery.I wrote this piece of code to swipe images.
$('#fullscreen').swipeleft(function () {
//Show next image
showNext();
alert('Left');
});
function showNext() {
$("#fullscreen").attr('src', "images/next.png");
}
But when I swipe, the image doesn't change and I get the error "09-13 14:49:21.188: W/webview(20238): Miss a drag as we are waiting for WebCore's response for touch down."
After browsing through some forums I added the following code.
var fullScr = document.getElementById("fullscreen");
fullScr.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
But it still doesn't work.Although when I change my screen orientation from portrait to landscape, the image changes.
What is it that happens when I change the orientation and how could I get it working in the same orientation (portrait/landscape) please?
Thanks in advance.

Well it worked for me :S... I used version 1.5.0 of Cordova and run the app on Android simulator 4.0.3. Could you try the following example?
HTML content:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- BASIC INCLUDES - TO BE MODIFIED ACCORDING TO YOUR CONVENIENCE -->
<link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
<!-- END - BASIC INCLUDES -->
<script type="text/javascript" charset="utf-8">
$(function() {
$('#fullscreen').swipeleft(function () {
//Show next image
showNext();
});
function showNext() {
$("#fullscreen").attr('src', "./images/next.png");
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img id="fullscreen" src="./images/previous.png"></img>
</div>
</div>
</body>
</html>
NB: Make sure of the following things:
Modify the source of the "basic includes" of the code to your convenience (source of the CSS / JS files of jQuery / jQuery Mobile)
Change the source of the version of cordova if yours is not 1.5.0
Hope this will work for you too. Anyway, let me know about your result.

Develop Reference

JavaScript is the programming language of the Web.

Remove the url search bar from android/iphone - javascript

try using media queries for different css rules based by orientation: /* i assume portrait to be the starting point */ .element{ rule:value; } #media (orientation: landscape) { .element{ rule:different value; } } but consider designing something more responsive perhaps

Related

How to make a tooltip with the same look and feel as when we add "title" attribute to an element?

How to move React dialog to top of the body using Onclick

Why isn't my Parallax scrolling JavaScript code working?

jQuery context is null + IE bug not showing contact/bio boxes

Swipe images in phoneap + jquery issue

Categories

Resources