I think its my html / css problem . I already got my web view correctly its from
My webView activity shows blank
Below are my html and css part
index.html
<!DOCTYPE html>
<html>
<head>
<title>Collection</title>
<link rel="stylesheet" type="text/css" href="insert.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="maindiv">
<!--HTML Form -->
<div class="form_div">
<div class="title">
<h2>Insert Data In Database .</h2>
</div>
<form action="insert.php" method="post">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label>Name:</label>
<input class="input" name="name" type="text" value="">
<label>Number:</label>
<input class="input" name="number" type="text" value="">
<label>Shop:</label>
<input class="input" name="shop" type="text" value="">
<label>item:</label>
<input class="input" name="item" type="text" value="">
<label>Collection:</label>
<textarea cols="25" name="collection" type="textarea" value="" rows="5"></textarea><br>
<input class="submit" name="submit" type="submit" value="Insert">
</form>
</div>
</div>
</body>
</html>
insert.css
.maindiv {
margin:30px auto;
width:980px;
height:500px;
background:#fff;
padding-top:20px;
font-family:'Droid Serif',serif;
font-size:14px
}
.title {
width:500px;
height:70px;
text-shadow:2px 2px 2px #cfcfcf;
font-size:16px;
text-align:center
}
.form_div {
width:70%;
float:left
}
form {
width:300px;
border:1px dashed #aaa;
padding:10px 30px 40px;
margin-left:70px;
background-color:#f0f8ff
}
form h2 {
text-align:center;
text-shadow:2px 2px 2px #cfcfcf
}
textarea {
width:100%;
height:60px;
border-radius:1px;
box-shadow:0 0 1px 2px #123456;
margin-top:10px;
padding:7px;
border:none
}
.input {
width:100%;
height:30px;
border-radius:2px;
box-shadow:0 0 1px 2px #123456;
margin-top:10px;
padding:7px;
border:none;
margin-bottom:20px
}
.submit {
color:#fff;
border-radius:3px;
background:#1F8DD6;
padding:5px;
margin-top:40px;
border:none;
width:100%;
height:30px;
box-shadow:0 0 1px 2px #123456;
font-size:18px
}
p {
color:red;
text-align:center
}
span {
text-align:center;
color:green
}
Am attaching screenshot I got like this in app i would like to change permanent without scroll in my app what can i do any one help .?
You have to add meta Viewport and check for screen density. You can find more detail here and here.
I have been looking for it online and everyone seems to refer to using "", but this doesn't seem to be working in my case, a friend asked me to make my website using jquery mobile but I feel there should be a way around this. Below are my html and css pages.
-html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Task 5 Report</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var act = [0,0]; //added this
function resizeBoxes() {
var browserWidth = $(window).width();
var browserHeight = $(window).height();
$('#main').css({
width: browserWidth*4,
height: browserHeight*1,
marginLeft: browserWidth*act[0]*-1, //added this
marginTop: browserHeight*act[1]*-1, //added this
});
$('.box').css({
width: browserWidth,
height: browserHeight,
});
}
resizeBoxes();
$(window).resize(function() {
resizeBoxes();
});
$('nav ul li a').click(function(){
return false;
});
function goTo(horizontal,vertical) {
var browserWidth = $(window).width();
var browserHeight = $(window).height();
act[0] = horizontal; //added this
act[1] = vertical; //added this
$('#main').animate({
marginLeft: '-'+browserWidth*horizontal,
marginTop: '-'+browserHeight*vertical,
}, 1000);
}
$('#link1 a').click(function(){
goTo(0,0);
});
$('#link2 a').click(function(){
goTo(1,0);
});
$('#link3 a').click(function(){
goTo(2,0);
});
$('#link4 a').click(function(){
goTo(3,0);
});
});
</script>
</head>
<body>
<div id="main">
<section id="box1" class="box">
<nav>
<ul>
<li id="link1">Home</li>
<li id="link2">Data</li>
<li id="link3">Server Side</li>
<li id="link4">Techical report</li>
</ul>
</nav>
<h2>Kunal Matwani</h2>
<h3>
This is a website with a portfolio of my work.<br> In this portfolio are the screenshots depicting my work with the android prototype.<br>
</h3>
</section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1">Home</li>
<li id="link2">Data</li>
<li id="link3">Server Side</li>
<li id="link4">Techical report</li>
</ul>
</nav>
<h2>Big data</h3>
<p>
<ul class="contentul">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</p>
</section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1">Home</li>
<li id="link2">Data</li>
<li id="link3">Server Side</li>
<li id="link4">Techical report</li>
</ul>
</nav>
<h2>Server Side</h2>
<p>
This page contains all the information on the work done on the server side i.e MySql,Jetty etc.
</p>
</section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1">Home</li>
<li id="link2">Data</li>
<li id="link3">Server Side</li>
<li id="link4">Techical report</li>
</ul>
</nav>
<h2>Technical report</h2>
<p>
Attached is the technical report as required.
</p>
</section>
</div>
</body>
</html>
-css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* These selection declarations have to be separate
* No text-shadow: twitter.com/miketaylr/status/12228805301
* Also: hot pink!
*/
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a:hover, a:active { outline: 0; }
/*=========================================
Main Styles
=========================================*/
body {
font-family: arial;
font-size: 15px;
overflow: hidden;
}
h2 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 54px;
margin-top: 50px;
}
h3 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 16px;
margin-top: 20px;
}
p {
color: #ffffff;
text-align: center;
font-family: arial;
font-size: 16px;
line-height: 24px;
margin-top: 20px;
}
.contentul {
text-align: center;
font-size: 16px;
line-height: 24px;
color: #ffffff;
}
/*=========================================
Nav bar
=========================================*/
nav {
height: 50px;
width: 100%;
}
nav ul li {
height: 50px;
width: 25%;
text-align: center;
float: left;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
line-height: 50px;
display: block;
}
/*=========================================
Nav links
=========================================*/
#link1 {
background: #1691BE;
}
#link2 {
background: #166BA2;
}
#link3 {
background: #1B3647;
}
#link4 {
background: #152836;
}
/*=========================================
Styling each section
=========================================*/
.box {
float: left;
}
#box1 {
background: #1691BE;
}
#box2 {
background: #166BA2;
}
#box3 {
background: #1B3647;
}
#box4 {
background: #152836;
}
If it's a website that you are creating and want a user to view it on a mobile look at bootstrap.
What you're looking for is a concept called Responsive Design. This means your CSS and HTML adapt to fit the device they're being displayed on. So you can open the same website in a phone browser and on a giant desktop display and they will both work. That is, the content will be comfortably viewable on both devices.
This page will explain everything you need to know about it:
http://webdesign.tutsplus.com/articles/designing-for-a-responsive-web--webdesign-3850
But if you want to just jump in then you can use a framework like Bootstrap as the other guy here said. There are loads of frameworks and some are really lightweight while others are full of features. Bootstrap is probably the most famous (and therefore most generic). You should have a look around and try a few different ones.
Still have a read of the tutorial though so you can understand how the grid systems work.
I wish to make a tag's height and width to 100%, now in other examples it worked using tag demonstrated below. But in the code given below, if I remove the "style="width: 370px; height: 505px"" from the and add the following code after meta tag
<style type="text/css>
body{
height:100%;
width:100%;
}
#map-canvas{
height:100%;
width:100%;
}
</style>
it doesn't work.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var shape;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
shape = new google.maps.Polygon({
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(e) {
var vertices = shape.getPath();
vertices.push(e.latLng);
}
function clearmap(){
initialize();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas" style="width: 370px; height: 505px"></div>
<input type="button" value="click" onclick="clearmap"()>
</body>
I made a jsfiddle out of your code
http://jsfiddle.net/jRwDs/3/
...and the answer from Rohit Azad, to add the html tag to the document style, seems to fix your problem (at least on jsfiddle).
My wesite, http://scissormanmusic.com/ when viewing it on my droid incredible, it displays with the left 200(ish)px cut off. But when i view it on a desktop/laptop computer web browser like Firefox, Safari, or Chrome the cutting off doesn't happen. I haven't a clue why. What's the best way to fix this. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> || ScissormanMusic.com || </title>
<script language="javascript">
function simplePreload()
{
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imageArray[i] = new Image;
document.imageArray[i].src = args[i];
}
}
simplePreload( 'news.png','newsRO.png','beats.png','beatsRO.png','music.png','musicRO.png','contact.png','contactRO.png','links.png','linksRO.png','scissorsHeader.png','scissorLeftLeftHeader.png','facebook.png','twitter.png','leftHeader.png','rightHeader.png' );
</script>
<style type="text/css">
a:link {color:#222229; text-decoration:none; border:none;}
a:visited {color:#222229; text-decoration:none; border:none;}
a:hover {color:#222229; text-decoration:underline; border:none;}
a:focus {color:#222229; text-decoration:none; border:none;}
a:active {color:#222229; text-decoration:none; border:none;}
html {
background-color:#222229;
margin:auto;
}
body {
background:#222229;
margin:0;
}
#scissorsHeader{
position:fixed center center;
}
#headerLeft {
position:relative;
right:408px;
bottom:347px;
}
#headerLeftLeft {
position:relative;
right:640px;
bottom:765px;
}
#headerRight {
position:relative;
left:344px;
bottom:450px;
}
#twitter {
position:relative;
left:573px;
bottom:907px;
}
#facebook {
position:relative;
left:573px;
bottom:914px;
}
#leftMenu {
position:relative;
left:186px;
bottom:451px;
width:700px;
}
#rightMenu {
position:relative;
left:942px;
bottom:524px;
width:700px;
}
#leftFrame {
position:relative;
right:450px;
bottom:900px;
z-index:3;
width:800px;
height:2000px;
}
#rightFrame {
position:relative;
left:472px;
bottom:2900px;
z-index:4;
width:800px;
height:2000px;
}
#menuContainer {
position:relative;
right:600px;
}
#everything{
position:relative;
left:150px;
}
</style>
</head>
<body>
<div id="everything" align="center">
<div id="scissorsHeader" align="center"><img src="scissorsHeader.png"/></div>
<div id="headerLeft" align="center"><img src="headerLeft.png"/></div>
<div id="headerRight" align="center"><img src="headerRight.png"/></div>
<div id="menuContainer" align="center">
<div id="leftMenu" align="center">
<a href="news.html" target="leftFrame">
<img name="news" src="news.png"
onmouseover="document.news.src='newsRO.png'"
onmouseout="document.news.src='news.png'"/>
</a>
<a href="beats.html" target="leftFrame">
<img name="beats" src="beats.png"
onmouseover="document.beats.src='beatsRO.png'"
onmouseout="document.beats.src='beats.png'"/>
</a>
<a href="music.html" target="leftFrame">
<img name="music" src="music.png"
onmouseover="document.music.src='musicRO.png'"
onmouseout="document.music.src='music.png'"/>
</a>
</div>
<div id="rightMenu" align="center">
<a href="contact.html" target="rightFrame">
<img name="contact" src="contact.png"
onmouseover="document.contact.src='contactRO.png'"
onmouseout="document.contact.src='contact.png'"/>
</a>
<a href="links.html" target="rightFrame">
<img name="links" src="links.png"
onmouseover="document.links.src='linksRO.png'"
onmouseout="document.links.src='links.png'"/>
</a>
</div>
</div>
<div id="headerLeftLeft" align="center"><img src="scissorLeftLeftHeader.png"/></div>
<div id="facebook" align="center"><img src="facebook.png"/></div>
<div id="twitter" align="center">
<img src="twitterLogo.png"/></div>
<br /><br /><br /><br /><br />
<div align="center">
<iframe src="news.html" name="leftFrame" id="leftFrame" style="border:hidden" scrolling="no"></iframe>
</div>
<div align="center">
<iframe src="contact.html" name="rightFrame" id="rightFrame" style="border:hidden" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
Thanks!
without giving fixed positioning can you try giving a margin and if you insist using fixed positioning then will you try using media query to detect the view port width and then giving a different right positioning?
You have problems with CSS. Try this: (override the needed on your code)
#leftFrame {
position:relative;
right:400px; /*change here any value*/
bottom:900px;
z-index:3;
width:800px;
height:2000px;
}
Also, you may want to use this CSS on another file (style.css, for example) and not inline.
In my application when I move from index1.html to index2.html,It shows black screen while retriving large amount of data from the server, stored in local database and retrieving the data from local database in onload of index2.html.How to show the progress bar when the black screen is appeared or how to remove that black screen?.
update
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Login</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
function submit()
{
alert("welcome");
window.open("index2.html");//while loading index2.html i need the progress bar
}
</script>
<style type="text/css">
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body >
<input type="button" style="width:80%" value="Submit" onClick="submit()"/>
</body>
</html>
Android code
public class MobilyzerActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}
If you are using frameworks like JQueryMobile then you have the option of showing loading dialog.
showing
$.mobile.showPageLoadingMsg()
hiding
$.mobile.hidePageLoadingMsg()
Are you using plain HTML?? any framework??