I am build phone gap web app. I have to upload images from client side using multipart/form-data and backend in nodejs.
This code works well for some mobile phones,but not working for some mobiles especially Samsung Tab 4, HUAWEI.( when open in these devices, on click nothing happens, even same code works well in other devices)
<form id = "uploadForm" enctype = "multipart/form-data" method = "post">
<!--- <img src="../Images/gallery_image.PNG" width="68px" height="auto" id="image_1"/> -->
<div id="image_1" style=" position: relative;
width: 68px;
height: auto;
background-image: url(../Images/gallery_image.PNG);
display: block;
left: 9%;
bottom: 2px;
background-size: cover;">
<input type="file" id="imgInp" name="userPhoto" size="60" accept="image/jpeg, image/png, image/jpg" style=" width: 60px;
height: 67px; opacity: 0;"/><br />
</div>
<input type="submit" value="Gallery" name="submit" id="submit_gallery" class="myButton_00" style="right: 9%;position: relative;top:5px;">
</form>
Related
In my testing so far Chrome with mobile inspector or actual Android phone (my Pixel 6) both are experiencing incorrect dragging behavior if there is an overlapping element that has pointer-events: none on it. Amazingly it's working as expected in iOS.
Here's a quick code sandbox I made that shows the issue, you can toggle the overlay on and off and feel how the dragging behavior changes.
https://codesandbox.io/s/brave-violet-bnn8xo
Issue tested on Mac/Chrome and Android Pixel 6 Chrome latest.
Anyone else have this experience?
Edit: to be clear, the issue is that you can't interrupt a throw in progress, like immediately changing your swipe direction after you swipe one way, it gets stuck, doesn't snap, and you need to lift your finger off and reapply to get it working again.
function Main() {
return (
<div className="App">
<p>The blue transparent overlay has pointer-events: none.</p>
<p>Try to interrupt a throw in progress it will bug out</p>
<section className={"testSection"}>
<div className={"testSectionInner"}>
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
</div>
</section>
<div className={"testOverlay"} />
<p>Without overlay.</p>
<p>Try to interrupt a throw in progress it will work as expected</p>
<section className={"testSection"}>
<div className={"testSectionInner"}>
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
</div>
</section>
</div>
);
}
class App extends React.Component {
render() {
return (
<Main />
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("root")
);
.App {
font-family: sans-serif;
text-align: center;
}
.testSection {
max-width: 100vw;
}
.testSectionInner {
overflow: scroll hidden;
padding-left: 1.25rem;
display: flex;
flex-flow: row nowrap;
scroll-snap-type: x mandatory;
}
.testItem {
scroll-snap-align: center;
flex: 0 0 calc(81.6591%);
background-color: red;
height: 200px;
margin-right: 4%;
pointer-events: auto;
}
.testOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background-color: blue;
opacity: 0.2;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I have a 1513x1079 image which resizes great when I resize my desktop browser.
However, when I open the same webpage on my android phone, everything shows up great, except the image. The whole page resizes properly, but there is no picture. There is only a tiny picture icon in the upper left corner.
Is there some upper limit to image dimensions for phones?
If so, why is there such a limit?
Does image responsiveness have some sort of dimension limit?
HTML Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name = "viewport" content = "width=device-width, initial-scale = 1"/>
<title>Projects web page</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="jQuery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6" id = "picture">
<img src="R1lr_cut.jpg" alt = "R1 Engine" class = "responsive"/>
</div>
<div class = "col-md-6" id = "home_text">
<h1>Inline 4 Engines</h1>
<ul id = "links">
<li>Home</li>
<li>Details</li>
<li>Calculate</li>
<li>About</li>
</ul>
<div id = "filler_text">
<h4>Historic information</h4>
<p>
The first across-the-frame 4-cylinder motorcycle was the 1939 racer Gilera 500 Rondine, it also had double-over-head camshafts, forced-inducting supercharger and was liquid-cooled.
</p>
<p>
Modern inline-four motorcycle engines first became popular with Honda's SOHC CB750 introduced in 1969, and others followed in the 1970s.
Since then, the inline-four has become one of the most common engine configurations in street bikes.
</p>
<p>
Outside of the cruiser category, the inline-four is the most common configuration because of its relatively high performance-to-cost ratio.
</p>
<p>
The success of the Honda CB750 and the Kawasaki Z1 got the attention of the Germans over at BMW. The Honda especially had been an industry game changer.
BMW’s motorcycle engine at that time was a horizontally opposed “boxer” twin cylinder engine that the company had settled on when they reverse engineered a British Douglas motorcycle with a boxer engine mounted longitudinally in the frame at the end of the First World War.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code :
body {
background-color: #000000;
}
.responsive {
width:100%;
height: auto;
}
#picture {
padding-right: -10%;
padding-top: 3%;
width: 100%;
}
#links li{
list-style-type: none;
float:left;
/*outline : 1px solid yellow;*/
width: 14%;
margin-right: 11%;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#links{
/*outline: 1px solid red;*/
width: 100%;
padding-left: 0.5%;
}
a {
/*outline :1px solid green;*/
display: block;
text-align: center;
padding: 3%;
color: #666666;
}
a:hover {
background-color: #333333;
color:#66ccff;
}
#home_text {
background-color: black;
padding-top: 8%;
color: #FFFFFF;
padding-left: 0%;
}
#home_text h1 {
margin-left: 5%;
/*outline: 1px solid purple*/
}
#filler_text {
padding-top: 12%;
margin-left: 5%;
}
Make sure your image size is set in percents, not in pixels or anything else.
Example:
<img src="yourimage.png">
<style>
img{width: 100%; /*100 can be any, but will fit 100% of the block*/}
</style>
You can also make your image a block background: `
myimg{background-image: url(“pic.jpg”); background-size: cover;}
Sorry if syntax is wrong, just typing from my phone. Also you can try doing like this instead of making it a block:
img{display: inline-block;}
`
If this doesn’t help change inline-block to block.
I have a nodogsplash version 0.9_beta9.9.9 installed on OpenWRT 15.05.01 device and they work well when I'm using the browser (mozzila, chrome) to access the captive portal and after click to 'Continue' they redirect me to pre-setting page.
This is my code:
`<!DOCTYPE html>
<html>
<head>
<!--
A client is authenticated by requesting the page $authtarget.
So, href to it here, with an img or link text the user can click on
Alternatively submit an HTTP form method=get, passing $authaction,
Also, note that any images you reference must reside in the
subdirectory that is the value of $imagesdir (default: "images").
Available variables:
error_msg: $error_msg
gatewayname: $gatewayname
tok: $tok
redir: $redir
authaction: $authaction
denyaction: $denyaction
authtarget: $authtarget
clientip: $clientip
clientmac: $clientmac
gatewaymac: $gatewaymac
nclients: $nclients
maxclients: $maxclients
uptime: $uptime
imagesdir: $imagesdir
pagesdir: $pagesdir
Additional Variables that can also be passed back via HTTP get.
Or just append them to the authentication link:
nodoguser
nodogpass
info
voucher
-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalida
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='shortcut icon' href='$imagesdir/splash.jpg' type='image/x-icon'
<title>$gatewayname Entry</title>
<style>
body
{
background-color:lightgrey;
color:black;
margin-left: 5%;
margin-right: 5%;
text-align: left;
}
img
{
width: 40%;
max-width: 180px;
margin-left: 0%;
margin-right: 5%;
}
input[type=submit]
{
color:black;
margin-left: 0%;
margin-right: 5%;
text-align:left;
font-size: 1.0em;
line-height: 2.5em;
font-weight: bold;
border: 1px solid;
}
</style>
</head>
<body>
<b>Funz Hotspot Gateway.</b>
<br>
<br>
<b>
<img src="$imagesdir/splash.jpg" alt="Splash Page:For access to the Interne
<hr>
<span style="color:red; font-style:normal;">
Bem Vindo!
</span>
</b>
<hr>
<br>
<b>Por favor, para acessar a internet clique em continuar.</b>
<br>
<br>
<hr>
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value='http://webapp.funz.com.br'>
<input type='submit' value='Continue'>
</form>
<hr>Copyright (C) 2004-2016. This software is released under the GNU GPL l
</body>
</html>
`
But the real problem is when I click to submit the form (see below) on a mobile device and the login "pop-up" closes instantly and I am not redirected to setting URL, But when I use the browser on the android device the redirect to the setting URL well.
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value="http://webapp.funz.com.br">
<input type='submit' value='Continue'>
</form>
Some One had some idea to solve this problem with the redirect to a URL with the nodogsplash Captive Portal on a Mobile devices.
Thanks Until now.
This is a default behavior of android captive network assistant. It is very specific about its functionality and one feature is, that when it finally detects it got connected to the internet, it immediately closes itself. It doesnt happen on iOS devices and older androids though.
You might want to try send the form with ajax and redirect manually, this way I think I have achieved holding the page longer, but I am not sure now why I abandoned this solution. Probably because some misbehavior on other devices.
My website http://galnova.com/ has just been given a responsive upgrade. It is fine on browsers but when I look at it on my samsung device the page wont scroll and it shakes like crazy. I could not find any error in the footer class or the structure itself but I am curious to why this is happening.
<footer>
<div class="wrap">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.galnova.com" property="cc:attributionName" rel="cc:attributionURL">Keith Jeter</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.<!--<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.galnova.com" rel="dct:source">http://www.galnova.com</a>.-->
<p class="pull-right">Back to top</p>
<p>© 2015 Galaxy Supernova · <!--Privacy · Terms--></p>
</div>
</footer>
Try adding a defined height to your footer and report back with any effects.
Like so:
#media (max-width: 767px)
footer {
border-radius: 0!important;
border: none!important;
margin: 0!important;
height: 400px;
}
EDIT: Disregard the above; the problem is coming from the Pirobox overlay plugin. From a CSS perspective, a quick fix I noticed is to add overflow: hidden to the .piro_html class in the Pirobox stylesheet you reference, like so:
.piro_html {
position: absolute;
top: 0;
left: 0;
padding: 0;
width: 500px;
height: 500px;
margin: 0;
display: block;
padding: 0;
z-index: 150001;
padding: 0;
overflow: hidden;
}
Doing this causes you to lose the little "X" closure box, but since you can tap anywhere on the exposed body copy to escape the lightbox, that seems to be an acceptable and clean solution. You could also look into playing with the jQuery code.
Let me know if this works for you.
In sample code html where use the tag details when the html code is read via html viewer in android enviroment doesn't work properly.
The first tag details works fine, but the second tag and son on...doesn't work properly.
The collaps/expande remain always in the content "+".
below the html code
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, width=device-width" />
<style>
summary {cursor: pointer; font: bold 1em Arial, Helvetica, sans-serif; padding: 8px 0; position: relative; width: 100%; }
summary::-webkit-details-marker {display: none}
summary:after{background: darkblue; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 30px;}
details[open] summary:after {content: "-";}
</style>
</head>
<body>
<header>
<details>
<summary>
Sample 1
</summary>
<p>In few simple steps (see below), you can download and perform the registration. sdjsadjaksjdaskjdasddasdasd Incoming and Outgoing Calls are shown and the Error messages are explained.sadiaus sadasdjasdjasl sdadjaskdjaslkdjsajdlaskjdlasjdsajd sdfahjahdj</p>
</details>
<details>
<summary>
Sample 2
</summary>
<p>In few simple steps (see below), you can download and perform the registration. sdjsadjaksjdaskjdasddasdasd Incoming and Outgoing Calls are shown and the Error messages are explained.sadiaus sadasdjasdjasl sdadjaskdjaslkdjsajdlaskjdlasjdsajd sdfahjahdj</p>
</details>
</header>
</body>
</html>`